Изменения не происходят в приложении React после setState - PullRequest
Новая
       14

Изменения не происходят в приложении React после setState

0 голосов
/ 30 апреля 2019

Я создаю приложение «Реакция» с использованием реактив-d3-graph.У меня есть такое состояние: 

data: {
        nodes: [{"id": "8", "color": "red"}],
      },

Нажав на один узел графика, я хочу изменить его цвет с красного на желтый.Поэтому я выполняю обратный вызов корневого компонента, где инициализирую состояние.Обратный вызов в корневом компоненте выглядит следующим образом: 

var color = {...this.state.data}
color.nodes[0].color = 'yellow';
this.setState({color});

Если я console.log состояние, значение было изменено, но узел в приложении остается красным.Однако эти изменения происходят после любого следующего действия в приложении.

1 Ответ

0 голосов
/ 30 апреля 2019

Вы никогда не должны напрямую изменять состояние React, но должны делать это как: 

var modifiedData = {...this.state.data}; // shallow copy of data
var modifiedNodes = [...this.state.data.nodes] // shallow copy of nodes array
var modifiedNode = {...this.state.data.nodes[0]} // shallow copy of node you are trying to change the color of
modifiedNode.color = 'yellow'; // changes color of a copy of the original node (not the original node itself, ensuring you aren't modifying the original React state directly)
modifiedNodes[0] = modifiedNode; // modifies the copy, for same reason
modifiedData.nodes = modifiedNodes; // modifies the copy, again for same reason
this.setState({data: modifiedData });

Кроме того, не уверен, почему у вас был "this.setState ({color});", в последней строке. Если у вас есть состояние как "данные: { узлы: [{"id": "8", "color": "red"}], },» тогда у вас должно быть this.setState ({data :ifiedData}); ', как у меня выше. И опять же, вы не должны изменять состояние напрямую, как вы делаете это в 'color.nodes [0] .color =' yellow ';'. Это напрямую изменяет состояние, потому что 'var color = [... this.state.data]' принимает только поверхностную копию, что означает, что любые вложенные массивы и объекты (поскольку они являются ссылочными типами и объектами в Javascript), не копируются глубоко. Вы должны глубоко скопировать их, как я делал выше.

Подробнее о том, почему вы не должны изменять состояние напрямую:

https://daveceddia.com/why-not-modify-react-state-directly/

Почему я не могу напрямую изменить состояние компонента?

...