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

Question

我在React中使用State，并且在一个nameChangeHandler的输入组件上放置了onChange侦听nameChangeHandler ，并且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' }
    ]
};

然后下面的代码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({});
};

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

状态自动突变

有人可以帮忙吗？

Answer 1

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

对于嵌套对象的深度复制，可以使用JSON.parse(JSON.stringify(object))

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

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