如何在 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
                     })   
     })
}