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

Question

我在 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({});
};

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

automatic mutation of state

有人可以帮忙吗？

Answer 1

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

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

这里你有一个对象数组，所以你可以做的是:

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