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}})