setState 不会触发更新 - reactJs

Question

我正在使用 socket.io 并做出反应。我在 componentDidMount(( 中设置了侦听器，但不知何故 setState(( 函数没有触发更新。当我记录data时，我可以看到从服务器发送的数据。这是我的代码：

this.state = {
list: []
};
public componentDidMount() {
this.socket = io('https://mybackendurl.com');
this.socket.on('an-event', data => {
console.log(data);
const list = [...this.state.list];
const updatedItemIndex = list.findIndex(
d => d.id === data.id
) as number;
list[updatedItemIndex].approvedBy = data.approvedBy;
this.setState({ list });
});
}

有人可以告诉我问题是什么以及如何解决这个问题吗？

Answer 1

ComponentDidMount

在组件加载后触发一次。您需要使用componentDidUpdate()你应该检查 https://reactjs.org/docs/state-and-lifecycle.html 和 https://reactjs.org/docs/react-component.html

Answer 2

我不能完全自信地说这会导致 react 看不到状态差异，但您在技术上正在变异状态，这可能会导致 react 将旧的变异状态视为与新的更新状态匹配并选择不重新渲染。 您确实const list = [...this.state.list]创建一个新的列表数组，这很好，但是您更新的嵌套对象仍将是以前的引用。尝试创建一个新的嵌套对象。

this.socket.on('an-event', data => {
const list = [...this.state.list.map(item => ({...item})]; // create new object 
const updatedItemIndex = list.findIndex(
d => d.id === data.id
) as number;
list[updatedItemIndex].approvedBy = data.approvedBy;
this.setState({ list });
});