Reactjs 为什么setState只在改变原始状态时更新

组件状态：

interface list {
name: string,
id: number,
marks: number
}

现在，在一些事件中，使用给定名称和下面的处理程序函数修改学生的分数，下面的操作不起作用

{
listOfStudents: list[],
}

但以下工作：

currentList = this.state.listOfStudents;
//find the list object with the given name
listToModify = currentList.map(item, ....=> item.name === event.name);
// update its marks
listToModify.marks = event.marks;
//set new state
this.setState({listOfStudents: currentList});

---

我不需要添加新数据，但需要修改现有数据，为什么在这种情况下需要进行变异？

对于对象或数组的给定状态，react仅使用其引用来比较并决定是否更新状态，它不会在对象值之间进行深度比较

第一种情况是传递相同的引用，因此没有更新状态。实际上，如果在第一个示例中修改数组，实际上是直接改变状态

---

第二种情况是克隆到一个新的新数组中，该数组包含一个不同的引用。由于引用与以前的数组不同，因此现在react将更新其状态。这实际上是处理数组/对象时更新状态的正确方法。

谢谢！有道理，所以它总是必须是深度复制吗？比如说，我在其中有数组数组，我必须深度复制最后一个数组还是顶级复制就足够了？是的，当你有深度嵌套对象时，你需要进行深度克隆。您可以使用一些lib，比如实现深度克隆的lodash来帮助您，因为它不是javascript中的本机语言。

//get a copy of the object
currentList = [...this.state.listOfStudents];
//find the list object with the given name
listToModify = currentList.map(item, ....=> item.name === event.name);
// update its marks
listToModify.marks = event.marks;
//set new state
this.setState({listOfStudents: currentList});