Question

嗨，所以情况就是这样。我正在建立一个反应的tictactoe游戏，我有3个组件 1. GameParent 董事会 3. gameControls

我在GameParent组件中有一个函数有两个名为AI和Game的状态属性，它们是对象。我将这些对象作为支柱传递给板组件。它还有一个名为startGame（）

的函数

startGame() {
  let newAI = new AI(this.state.AIIdentity);
  let newGame = new Game(newAI,this.state.AIIdentity);
  this.state.AI.plays(this.state.Game);
  this.state.Game.start();
  this.setState({
    start: true,
    AI: newAI,
    Game: newGame,
  });
console.log("THIS!!!",this)
console.log("THIS!!!",this.state)
console.log("THIS!!!",this)
console.log("THIS!!!",this.state.Game);
}

当调用this.state.Game.start（）时，Game对象中有一个名为status的属性，应该更改为＆＃34;运行＆＃34;

我将startGame（）函数传递给我的gameControls组件，并将其附加到我的启动按钮onClick handler。

我的电路板组件处理电路板方块上的点击，但只有在Game.status ===＆＃34;运行＆＃34;但我继续得到状态===＆＃34;开始＆＃34;的对象。

所以当我添加这4个console.logs时，当我打印出这个时，我看到Game对象的状态是＆＃34;开始＆＃34;但是当我在console.log this.state和this.state.Game上时，状态设置为＆＃34;运行＆＃34;！

我很困惑，为什么会发生这种情况...我猜它是React更新它的孩子的方式，但我还没有找到解释如何渲染的解释（）和setState（）的工作原理。或者我可能还没有完全理解＆＃34;这个＆＃34;将函数和对象传递给子组件时会产生影响。

如果你们想看到完整的代码，这里是链接 http://codepen.io/comc49/pen/WRqBXr?editors=0110

Answer 1

你不应该把函数放在状态中。 State仅用于数据。我认为这可能是意外行为的一个来源。
this.setState是一个异步函数，这意味着无法保证在调用this.setState后立即设置状态。这可以解释console.logs

为什么我的console.log显示不同的属性值，如果我使用相同的对象？ reactjs

1 个答案: