React 组件的状态，响应中数组中对象的错误顺序

Question

我正在通过 websocket 向 React 应用程序获取数据。我有一个大对象，其中包含游戏数据。它的属性之一是玩家对象数组，如下所示：

{
  propertyX: "X",
  players: [{player1}, {player2}, {player3}],
  propertyY: "Y"
}

问题是，在我的数据库和来自 websocket（Chrome 中的网络选项卡）的响应中，保留了推送的那些播放器对象的顺序，即使我在将游戏插入到组件状态之前 console.log 也可以。然而，当我访问状态时，我会在这个数组中得到不同的玩家顺序，它是按他们在游戏中得分的地方排序的。

来自这个原始数据：

players: [{ place: 2 }, { place: 3 }, { place: 1 }]

我的状态是这样的：

players: [{ place: 1 }, { place: 2 }, { place: 3 }]

这种行为的原因可能是什么？

@编辑 这行代码用于一个游戏

console.log(game.players[0].place) 
this.setState({ game }, () => {
  console.log("callback", game.players[0].place, this.state.game.players[0].place)
});

输出：

4
callback, 1, 1

添加了包含整个组件代码的 pastebin： https://pastebin.com/hHLQMR6y

Answer 1

由于您记录了两次相同的引用 - game.players[0].place 并且它显示了不同的数据，因此您在某处对其进行了变异。

请记住 this.setState() 进行了浅合并，因此如果您在 setState 行之后访问 game 对象（例如执行 game.players = ...），您将同时改变局部变量和生成的状态来自它。

Answer 2

好吧，没有看到您的代码，我没有太多工作要做，但可能是您错误地设置了状态。其他需要考虑的是this.setState({}) 不会立即发生，它实际上是异步的。因此，如果您尝试在设置之前访问状态，您将收到旧数据。您可以提供回调函数作为第二个参数，以便在设置状态后运行：

const callback = () => {
    console.log(this.state.players);
}

this.setState({
    players: newPlayers
}, callback);