React中如何在一次提交时同时修改状态数组原有对象并新增对象

完全可以在一次状态更新操作中同时完成两个需求，不需要分开调用setItems，实现代码如下：

const handleSubmit = e => {
  // 推荐使用函数式更新，避免闭包捕获旧状态导致的异常
  setItems(prevItems => [
    // 先遍历修改key为3的项的complete属性
    ...prevItems.map(item => {
      if (item.key === 3) {
        return {...item, complete: false}
      }
      return item
    }),
    // 再向末尾追加新对象
    {
      key: 4,
      complete: true
    }
  ])
}

逻辑说明 #

• 先通过map遍历原状态数组，匹配到key === 3的对象时返回修改了complete属性的新对象，其余对象原样返回，全程不会修改原状态，符合React immutable更新要求
• 展开修改后的数组后直接追加新对象，单次调用setItems就可以完成两个操作
• 给setItems传入回调而非直接依赖外层的items变量，是React状态更新的最佳实践，可以避免闭包捕获到过时的状态值引发的bug。

内容的提问来源于stack exchange，提问作者Leonardo