将数组值附加到React JS中的当前数组中

Question

我有州的价值

this.state = {
    emp: [
        {id: "1", name: "A"}
        {id: "2", name: "B"}
        {id: "3", name: "B"}
    ]
}

如何var arr = {id:"4", name:"D"}在emp不删除数组当前值的情况下添加类似于状态的数组.我只想将新的值数组附加到当前状态数组.有人可以帮忙吗？

Answer 1

在现代JavaScript中,您可以使用spread运算符:

添加一个项目

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

添加多个项目:

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

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

您不应该使用除setState之外的其他方法来改变组件的状态,因为渲染的数据将不同步.

Answer 2

只需使用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

结果