反应在子组件中不显示更新状态

Question

这是React教程的改编。 我的意图是使用一个或两个玩家的选择向自动选择动作迁移。 在此阶段，由于某种原因，在使用this.setState({squares:this.state.squares, xIsNext: !this.state.xIsNext})语句对handleMove(i)的调用中未捕获正方形的选择，例如可以从Button和Square组件中的两个console.log调用中看到。

这是本教程中使用的技术，因此我不确定为什么squares数组未更新。 我阅读了其他文章，以及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/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/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>

Answer 1

捕获了选择，但是您没有在state保存squares的新值。

这个

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

反应在子组件中不显示更新状态

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-16 23:50:42

反应在子组件中不显示更新状态

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-16 23:50:42

解决方案1
1 已采纳 2017-04-16 23:50:42