Javascript React未在子组件中显示更新状态_Javascript_Reactjs_State

Javascript React未在子组件中显示更新状态

javascript reactjs

Javascript React未在子组件中显示更新状态,javascript,reactjs,state,Javascript,Reactjs,State,这是本书的改编本。我的意图是使用一个或两个玩家的选择来迁移到自动模式选择动作。在这个阶段，由于某些原因，没有选择正方形使用this.setState（{squares:this.state.squares，xIsNext:！this.state.xIsNext}）语句在调用handleMove（i）时捕获 Button和Square组件中的两个console.log调用这是本教程中采用的技术，因此我不确定为什么方形阵列不可用更新。我读了其他帖子和Facebook关于不变性的讨论该功能

这是本书的改编本。我的意图是使用一个或两个玩家的选择来迁移到自动模式选择动作。在这个阶段，由于某些原因，没有选择正方形使用

this.setState（{squares:this.state.squares，xIsNext:！this.state.xIsNext}）语句在调用handleMove（i）时捕获
Button和Square组件中的两个console.log调用
这是本教程中采用的技术，因此我不确定为什么方形阵列不可用
更新。我读了其他帖子和Facebook关于不变性的讨论
该功能（在这种情况下，手柄移动（i），正确吗？）必须在状态更改之前完成
反映在整体状态上。在其他组件以及整个DOM中调用console.log
不要在方块上反射咔哒声
有人能告诉我为什么这不起作用吗？多谢各位
在

井字过三关
功能广场（道具）{
console.log（props.value）；
返回(
props.onClick（）}>{props.value}
);
}
类板扩展React.Component{
renderSquare（一）{
console.log（this.props.squares）；
返回此.props.onClick（i）}/>
}  
render（）{
返回(
{this.renderSquare（0）}
{this.renderSquare（1）}
{this.renderSquare（2）}
{this.renderSquare（3）}
{this.renderSquare（4）}
{this.renderSquare（5）}
{this.renderSquare（6）}
{this.renderSquare（7）}
{this.renderSquare（8）}
);
}
}
类游戏扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
真的，
正方形：数组（9）。填充（空），
下一个：是的
}
}
onePlayer（）{
this.setState（{onePlayerGame:true}）；
返回(
document.getElementById（'onePlayer'）.style.color=“黄色”，
document.getElementById（'twoPlayer'）.style.color=“黑色”
);
}
两人（）{
this.setState（{onePlayerGame:false}）；
返回(
document.getElementById（'onePlayer'）.style.color=“黑色”，
document.getElementById（'twoPlayer'）.style.color=“黄色”
);
}
handleMove（一）{
const squares=this.state.squares.slice（）；
正方形[i]=this.state.xIsNext？'X'：'O'；
这是我的国家({
广场：这个州，广场，
xIsNext:！this.state.xIsNext
})
}
render（）{
返回(
this.onePlayer（）}>One播放器
这个.twoPlayer（）}>两个玩家
这个.handleMove（i）}/>
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
)
选择被捕获，但您没有在状态下保存方块的新值
这个
这是正确的太好了！非常感谢你。
<!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>

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
    })
}