反應未顯示子組件中的更新狀態

這是對React tutorial的改編。我的意圖是使用一個或兩個玩家的選擇向自動遷移選擇遷移。在這個階段出於某種原因，正如聲明中handleMove(i)的呼叫中所捕獲的正方形的選擇不是，這可以從Button和Square組件中的兩個console.log調用中看出。反應未顯示子組件中的更新狀態

這是本教程中使用的技術，所以我不確定爲什麼方格陣列不是更新。我讀過其他帖子和Facebook關於不變性的討論，其中指出的功能（在這種情況下handleMove(i)，正確？）必須完成之前，更改爲狀態才體現在整體狀態。在其他組件中對console.log的調用以及整體DOM 未反映方塊上的點擊次數。

有誰能告訴我爲什麼這不起作用？謝謝。

在JSBin

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8" /> 
<title>Tic Tac Toe</title> 
<script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
<script src="https://unpkg.com/[email protected]/babel.min.js"></script> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<div id='root'></div> 
<script type='text/babel' > 


function Square(props){ 
    console.log(props.value); 
    return(
    <button className="square" onClick={() => props.onClick()}>{props.value}</button>  
    ); 
} 



class Board extends React.Component{ 
    renderSquare(i){ 
    console.log(this.props.squares); 
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} /> 
    } 

    render(){ 
    return(
    <div className="board"> 
    <div className="row"> 
     {this.renderSquare(0)} 
     {this.renderSquare(1)} 
     {this.renderSquare(2)} 
    </div> 
    <div className="row"> 
     {this.renderSquare(3)} 
     {this.renderSquare(4)} 
     {this.renderSquare(5)} 
    </div> 
    <div className="row"> 
     {this.renderSquare(6)} 
     {this.renderSquare(7)} 
     {this.renderSquare(8)} 
    </div> 
    </div> 
    ); 
    } 
} 


class Game extends React.Component{ 

    constructor(props){ 
    super(props); 
    this.state = { 
     onePlayerGame: true, 
     squares: Array(9).fill(null), 
     xIsNext: true 
    } 
    } 

    onePlayer(){ 
    this.setState({onePlayerGame: true}); 
    return(
    document.getElementById('onePlayer').style.color = "yellow", 
    document.getElementById('twoPlayer').style.color = "black" 
    ); 
    } 


    twoPlayer(){ 
    this.setState({ onePlayerGame: false}); 
    return(
    document.getElementById('onePlayer').style.color= "black", 
    document.getElementById('twoPlayer').style.color= "yellow" 
    ); 

    } 

    handleMove(i){ 
    const squares = this.state.squares.slice(); 
    squares[i] = this.state.xIsNext ? 'X':'O'; 


    this.setState({ 
     squares: this.state.squares, 
     xIsNext: !this.state.xIsNext 
    }) 
    } 



    render(){ 
    return(
    <div id="main"> 
     <div> 
     <button className="gameSelect" id="onePlayer" value={this.state.onePlayerGame} onClick={() => this.onePlayer()} >One Player</button> 
     <button className="gameSelect" id="twoPlayer"value={this.state.onePlayerGame} onClick={() => this.twoPlayer()} >Two Players</button> 
     </div> 

     <Board 
     squares={this.state.squares} 
     onClick={(i) => this.handleMove(i)} /> 

    </div> 
    ); 
    } 
} 



ReactDOM.render(
    <Game />, 
    document.getElementById('root') 
) 



</script> 
</body> 
</html>

來源

2017-04-16 Cameron

選擇被捕獲，但你是不是節省的squares在state新的價值。

這

handleMove(i){ 
    const squares = this.state.squares.slice(); 
    squares[i] = this.state.xIsNext ? 'X':'O'; 


    this.setState({ 
     squares: this.state.squares, <----- You are not assigning the new value 
     xIsNext: !this.state.xIsNext 
    }) 
}

應該

handleMove(i){ 
    const squares = this.state.squares.slice(); 
    squares[i] = this.state.xIsNext ? 'X':'O'; 


    this.setState({ 
     squares: squares, 
     xIsNext: !this.state.xIsNext 
    }) 
}

這裏是正確的jsbin

來源

2017-04-16 23:50:42 QoP

好極了！非常感謝你。 – Cameron

反應未顯示子組件中的更新狀態

回答

相關問題