在现代 JavaScript 中，您可以使用扩展运算符：

添加单个项目

addItem = item => {
  this.setState({
    emp: [
      ...this.state.emp,
      item 
    ]
  })
}

添加多个项目：

addItems = items => {
  this.setState({
    emp: [
      ...this.state.emp,
      ...items
    ]
  })
}

该价差运营商将所有的元素this.state.emp在新数组实例，item被追加为最后一个元素。

您不应该使用setState以外的其他方式来改变组件的状态，因为您呈现的数据将不同步。

只需使用concat

this.setState({ emp: this.state.emp.concat('new value') })

concat 优于push,的原因unshift是

数组推送

Array.prototype.push 允许我们将元素推送到数组的末尾。此方法不返回新副本，而是通过添加新元素来改变原始数组，并返回调用该方法的对象的新长度属性。

数组.unshift

将元素添加到数组的最开始。与 push 一样，unshift 不会返回修改后的数组的新副本，而是返回数组的新长度

这两种方式都会改变 a 的突变状态array。突变项应该保持不变，因为它是我们的原始来源。

数组连接

所述的concat（）方法用于合并两个或更多个阵列。此方法不会更改现有数组，而是返回一个新数组。

但是，您Object.assign()也是，它创建了分配给它的对象的深层副本。

let emp = Object.assign([],this.state.emp); //type of an array

结果

如果使用功能性 setState（因为您是基于 prevState 更新状态）和传播语法，则需要更新

this.setState(prevState => ({
    emp: [
        ...prevState.emp, 
        {id:"4",name:"c"}
    ]
}))

如果使用功能组件，瞧一个简单的例子：

const [hiddenDivs, setHiddenDivs] = useState([1, 2, 3, 4]);

const handleCatDivTitleClick = (divNum: number) => {
   if (hiddenDivs.includes(divNum)) {
      setHiddenDivs(hiddenDivs.filter((d) => d !== divNum));  //REMOVE FROM ARRAY
   } else {
      setHiddenDivs([...hiddenDivs, divNum]);  //ADD TO ARRAY
   }
};

<div class={`${style.catDiv} ${hiddenDivs.includes(1) ? style.catDivHide : ''}`}>
   <div class={style.catTitle} onClick={() => handleCatDivTitleClick(1)}>
      Imagine a list of categories like this. All begin "hidden" (shrunk-up).
   </div>
</div>
<div class={`${style.catDiv} ${hiddenDivs.includes(2) ? style.catDivHide : ''}`}>
   <div class={style.catTitle} onClick={() => handleCatDivTitleClick(2)}>
       You want to shrink/expand category based on clicking title.
   </div>
</div>
<div class={`${style.catDiv} ${hiddenDivs.includes(3) ? style.catDivHide : ''}`}>
   <div class={style.catTitle} onClick={() => handleCatDivTitleClick(3)}>
      Basically, a home-rolled accordian-type display.
   </div>
</div>