Question

我正在通过websocket将数据发送到React应用。我有一个大对象，可以存放游戏数据。它的属性之一是播放器对象数组，如下所示：

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

问题是，在我的数据库中以及websocket（Chrome中的“网络标签”）的响应，这些被推送的播放器对象的保留顺序保持不变，即使我在将游戏插入Component状态之前进行console.log记录也没问题。但是，当我访问状态时，我在此阵列中得到的玩家顺序不同，这是由他们在游戏中得分的位置决定的。

根据原始数据：

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

我的状态如下：

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

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

@edit 这行代码用于游戏之一

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

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

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

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

Answer 2

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

请记住，this.setState（）进行了浅层合并，因此，如果您在game行之后访问setState对象（例如，进行game.players = ...），则会同时更改两个局部变量以及由此产生的状态。

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

2 个答案: