如何在 React 中使用 setState 更新數組元素？

Question

如果我有一個類似於這樣的數組結構：

person[{id: 0, firstname: 'john', surname: 'smith'}, 
       {id: 1, firstname: 'jane', surname: 'smith'}]

然后使用事件處理程序來捕獲一些更改並使用 setState，我如何更新與此類似的數組元素：

handleChangeEvent(newSurname, id){
     this.setState({ person[id].surname : newSurname})
}

Answer 1

使用setState()的更新程序回調在單個原子操作中執行狀態更改，而不會在同一事件滴答中覆蓋（或被覆蓋）組件的其他狀態更改：

handleChangeEvent(surname, id) {
    this.setState(({ people }) => ({
        people: people.map(
            person => person.id === id ? { ...person, surname } : person
        )
    }));
}

Answer 2

也許您可以嘗試以下方法：

handleChangeEvent(newSurname, id){
  this.setState(prevState => ({
    people: prevState.people.map(
      person => person.id === id ? { ...person, surname: newSurname } : person
    )
  }));
}

在此代碼片段中，我們將獲得對組件狀態下的people數組的引用。 然后我們根據ids過濾這個數組，如果id匹配需要更新姓名的人，我們會適當地設置surname 。 否則，如果id與需要更新的人不匹配，我們只返回現有對象。

希望這有幫助！

Answer 3

這基本上就是你要找的。 但是，我建議您使用像 immer 這樣的庫來創建不可變對象。

handleChangeEvent(newSurname, id){
     this.setState({
                     people : Array.from(this.state.people, person => {
                          if(person[id] === id)
                           return {...person, surname: newSurname}
                          return person
                     })   
     })
}