React中如何更新对象数组类型state且不清除原有初始状态

原有代码的问题 #

• Array.push() 属于原地修改方法，直接变更前一次state的引用，不符合React状态不可变的更新要求
• push() 方法返回值为数组更新后的长度，而非修改后的数组本身，原有写法执行后state会被赋值为数字，完全不符合预期

正确实现 #

要实现追加内容且不覆盖原有状态，直接通过展开运算符返回全新数组即可：

const [arr, setArr] = useState([])

const arr1 = [{key:'a',value:'a'},{key:'b',value:'b'}]
const arr2 = [{key:'c',value:'c'},{key:'d',value:'d'}]

// 第一次执行，得到arr1的内容
setArr(prevState => [...prevState, ...arr1])
// 第二次执行，在原有内容基础上追加arr2
setArr(prevState => [...prevState, ...arr2])

可选补充：按key去重追加 #

如果需要避免重复key的对象插入，且旧的同key项被新项覆盖，可以用以下写法：

setArr(prevState => {
  // 要插入的新数组
  const insertArr = arr1
  // 过滤掉原有数组中和新数组key重复的项
  const filteredPrev = prevState.filter(
    prevItem => !insertArr.some(newItem => newItem.key === prevItem.key)
  )
  return [...filteredPrev, ...insertArr]
})

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