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()的{{3}}在单个原子操作中执行状态更改，而不会在同一事件滴答中覆盖组件的其他状态更改（或被其他状态更改覆盖）： / p>

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

如何在React中使用setState更新数组元素？

3 个答案: