Javascript ReactJS中的自动状态变异问题

我在React中使用State，在调用

nameChangeHandler

的输入组件上放置了一个

onChange

侦听器，我遇到了一个奇怪的变异问题

这是我的国家目标：

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' }
    ]
};

然后下面的代码

this.state.person

用一个额外的字符（我输入）记录更新后的状态，即使我没有在任何地方使用setState，也没有直接改变状态

nameChangeHandler = (event, id) => {
    const personIndex = this.state.persons.findIndex(p => p.id === id);
    const newPersons = [...this.state.persons];
    
    newPersons[personIndex].name = event.target.value;
  
    console.log(newPersons);
    console.log(this.state.persons);
    //this.setState({});
};

下面是开发人员控制台的屏幕截图

---

有人能帮忙吗？

Es6 spread语法不进行浅复制而不是深度复制。因此，当您试图从现有嵌套对象创建新的嵌套对象时，必须使用深度复制方法

对于嵌套对象的深度复制，可以使用

JSON.parse（JSON.stringify（object））

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

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

---

是的，你是<代码>newPersons[personIndex].name=event.target.value。传播语法不深！它不会复制深度嵌套的对象值！嘿，谢谢！我们是否有其他方法可以在ES6中传播以创建深度克隆？因为这也需要克隆对象。