Memory 向处于状态的数组添加值的最佳方法是什么

我有一个数组在state中，比如说这个.state.arr。 我想向这个状态属性添加一些内容，然后再更改一些属性

选择1

onChange(event){
    this.state.arr.push('newvalue');
    ...
    this.setState({some:'val',arr:this.state.arr})
}

选择2

onChange(event){
    var newArr = this.state.arr;
    ...
    newArr.push('newvalue');
    ...
    this.setState({some:'val',arr:newArr})
}

---

所以。。我知道，国家应该被视为不可改变的。但是，在选项1中，我仍然可以使用它来设置状态，或者我需要使用选项2这样的选项，因此总是首先在内存中复制一个副本。您提供的两个选项都是相同的。它们仍然指向内存中的同一对象，并且具有相同的数组值。您应该像您所说的那样将state对象视为不可变的，但是您需要重新创建数组，使其指向新对象，设置新项，然后重置状态。例如：

onChange(event){
    var newArray = this.state.arr.slice();    
    newArray.push("new value");   
    this.setState({arr:newArray})
}

---

就目前而言，这是最好的方式

this.setState(previousState => ({
    myArray: [...previousState.myArray, 'new value']
}));

---

使用concat的另一种简单方法：

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

---

如果您使用的是ES6语法，则可以使用将新项作为一行程序添加到现有数组中

//追加一个数组
const newArr=[1,2,3,4]
this.setState（prevState=>({
arr:[…prevState.arr，…newArr]
}));
//附加单个项目
this.setState（prevState=>({
arr:[…prevState.arr，'新项目']
}));

如果要继续向我使用的数组添加新对象，请执行以下操作：

_methodName = (para1, para2) => {
  this.setState({
    arr: this.state.arr.concat({para1, para2})
  })
}

这可能会起作用。

最好现在就走

this.setState({ myArr: [...this.state.myArr, new_value] })

onChange（）{
const{arr}=this.state；
让tempArr=[…arr]；
临时推送（“新值”）；
这是我的国家({
节奏
});
}

---

这可能不会直接回答您的问题，但为了下面这样的州

 state = {
    currentstate:[
     {
    id: 1 ,
    firstname: 'zinani',
    sex: 'male'

     }
    ]

 }

解决方案

const new_value = {
    id: 2 ,
    firstname: 'san',
    sex: 'male'

     }

用新值替换当前状态

 this.setState({ currentState: [...this.state.currentState, new_array] })

---

用于带挂钩的功能组件

const [searches, setSearches] = useState([]);

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query));

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query));

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query]);

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query]);

来源：

短途使用挂钩：

const [value, setValue] = React.useState([]);
setValue([...value,newvalue]);

---

看到这一点，第三个选项可能是最好的：使用React:Slice提供的immutability helper将创建数组的新浅层副本，使其不可变。@Butters FWIW，这并不使其不可变，因为数组中的对象仍然可以变异。这里是字符串，所以这不是问题，但在一般情况下，

slice

仍然允许原位更新，绕过正常的状态检查。我发现这是最具表现力和最不冗长的方法。将其更改为可接受的答案，因为这不仅是最后一次冗长，根据jsperf，这也是最快的解决方案。如果setState没有按预期顺序调用，那么这可能会导致状态不同步。最好使用setState（prevState，…），这是在代码库中使用最新语法的好方法！这对我有用。它还可用于在数组中预编：

this.setState（（prevState）=>（{myArray:[values，…prevState.myArray]，}））如果我希望“新值”是我传入的参数。我是否只需执行
onChange=（id）=>{this.setState（prevState=>（{tags:[…prevState.tags，id]}））；}
如何将新值添加到数组中的特定位置？我想知道如何将新值插入到数组的中间，而不是添加到数组的末尾？
const [value, setValue] = React.useState([]);
setValue([...value,newvalue]);