State of React Component, неправильный порядок объектов в массиве из ответа

Question

Я получаю данные в приложение React через websocket. У меня есть один большой объект, который содержит данные игры. Одним из его свойств является массив объектов игрока, например:

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

Проблема в том, что в моей базе данных и ответе от веб-сокета (вкладка «Сеть» в 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

Добавлена ​​вставка с полным кодом компонента: https://pastebin.com/hHLQMR6y

Answer 1

Поскольку вы регистрируете одну и ту же ссылку дважды - game.players[0].place и она показывает разные данные, вы где-то изменяете ее.

Помните, что this.setState () выполняет поверхностное объединение, поэтому, если вы обращаетесь кgame объект после строки setState (например, делая game.players = ...) вы изменяете как локальную переменную, так и состояние, которое было сгенерировано из нее.

Answer 2

Ну, не видя ваш код, мне не о чем продолжать, но, возможно, вы неправильно устанавливаете состояние. Еще нужно учесть, что this.setState({}) происходит не сразу, а на самом деле асинхронно. Итак, если вы попытаетесь получить доступ к состоянию до того, как оно будет установлено, вы получите старые данные. Вы можете предоставить функцию обратного вызова в качестве второго аргумента для запуска после установки состояния:

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

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