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

Question

嗨，情况是这样的。我正在用 React 构建一个 tictactoe 游戏，我有 3 个组件1. 游戏家长2. 董事会3.游戏控制

我在 GameParent 组件中有一个函数，它有两个状态属性，称为 AI 和 Game，它们都是对象。我将这些对象作为 Prop 传递给板组件。它还有一个名为 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 的属性，应将其更改为“running”

我将 startGame() 函数传递给我的 gameControls 组件，并将其附加到我的开始按钮 onClick 处理程序。

我的棋盘组件处理棋盘方 block 上的点击，但它仅在 Game.status ===“正在运行”时注册点击，但我不断获取状态 ===“开始”的对象。

所以当我添加这4个console.logs时，当我只打印这个时，我看到Game对象的状态是“开始”，但是当我console.log this.state和this.state.Game时，状态是设置为“运行”!

我很困惑为什么会发生这种情况......我猜这是 React 更新它的子项的方式，但我还没有从阅读 render() 和 setState() 的工作原理中找到解释。或者也许我不完全理解当我将函数和对象传递给子组件时“this”是如何影响的。

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

Answer 1

1. 您不应该将函数放在状态中。状态仅用于数据。我认为这可能是意外行为的根源之一。

2. this.setState 是一个异步函数，这意味着无法保证在调用 this.setState 后立即设置状态。这可以解释 console.logs

的意外输出