如何在ReactJS中向数组添加元素？push()与concat()用法困惑

在React中，绝对不能直接修改state中的数组（比如用push()），因为push()会改变原数组的引用，而React依赖state的引用变化来触发组件重新渲染。我们需要创建一个新数组来更新state，这里推荐两种常用方式：

方式1：使用ES6扩展运算符（最简洁） #

直接在父组件的addItem方法里这样写：

addItem() {
  this.setState(prevState => ({
    items: [...prevState.items, { name: 'New Name', num: 'New Num' }]
  }));
}

这里用了函数式更新的方式（传入一个函数给setState），因为我们需要基于之前的state来计算新state，这样能确保拿到最新的state值，避免异步更新带来的问题。扩展运算符[...prevState.items]会复制原数组的所有元素，然后在末尾添加新的项，返回一个全新的数组。

方式2：使用concat()方法 #

concat()方法会返回一个新数组，不会修改原数组，也能实现需求：

addItem() {
  this.setState(prevState => ({
    items: prevState.items.concat({ name: 'New Name', num: 'New Num' })
  }));
}

为什么不能用push()？ #

push()是原地修改原数组，不会创建新的数组引用。React在对比state变化时，发现数组的引用没有改变，就会认为state没有更新，因此不会触发组件的重新渲染，你的新增项自然不会显示出来。

替换掉你原有的addItem()方法后，点击"ADD ITEM"按钮就能看到期望的新增项了。

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