ReactJS中的自动状态突变-问题

Question

我在React中使用State，并且在调用fruits[0].slice(fruits[0].indexOf("\n"),fruits[0] .indexOf("\n", fruits[0].indexOf("\n") + 1)) 的输入组件上放置了onChange侦听器，并且遇到了一个奇怪的突变问题。

这是我的状态对象：

nameChangeHandler

然后下面的代码state = {     persons: [       { id: '363724', name: 'Person1', age: 28, job: 'React Developer' },       { id: '724324', name: 'Person2', age: 49, job: 'General Manager' },       { id: '753424', name: 'Person3', age: 25, job: 'ITSM Consultant' }     ] }; 使用一个额外的字符（我键入）记录更新后的状态，即使我不在任何地方使用setState也不直接改变状态。

this.state.person

这是开发人员控制台的屏幕截图。

automatic mutation of state

有人可以帮忙吗？

Answer 1

ES6扩展语法不进行浅表复制而不是深表复制。因此，当您尝试从现有对象中创建新的嵌套对象时，必须使用深表复制方法。

要深层嵌套对象，可以使用JSON.parse(JSON.stringify(object))

这里有一个对象数组，因此您可以执行以下操作：

let newPersons = this.state.persons.map(person => {return {...person}})