将值添加到状态数组的最佳方法是什么答案

【问题标题】：What is the best way to add a value to an array in state将值添加到状态数组的最佳方法是什么
【发布时间】：2014-12-17 18:17:14
【问题描述】：

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

选项 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})
}

所以.. 我知道 this.state 应该被视为不可变的。但是可以像在选项 1 中那样使用它，我仍然从中设置状态，还是我需要使用类似于选项 2 的东西，因此总是首先在内存中制作副本

【问题讨论】：

看到这个stackoverflow.com/questions/26253351/…和这个stackoverflow.com/questions/23966438/…
第三种选择可能是最好的：使用 React 提供的不变性助手：facebook.github.io/react/docs/update.html

标签： memory state reactjs

【解决方案1】：

您提供的两个选项都是相同的。它们都将仍然指向内存中的同一个对象并具有相同的数组值。您应该将状态对象视为您所说的不可变对象，但是您需要重新创建数组以使其指向新对象，设置新项目，然后重置状态。示例：

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

【讨论】：

Slice 将创建一个新的数组浅拷贝，使其不可变。
@Butters FWIW，这并不能使它不可变，因为数组中的对象 in 仍然可以变异。这里是字符串，所以这不是问题，但在一般情况下，slice 仍然允许原位更新，绕过正常的状态检查。

【解决方案2】：

目前，这是最好的方法。

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

【讨论】：

这对我有用。它也适用于预先添加到数组中：this.setState((prevState) => ({ myArray: [values, ...prevState.myArray], }));
如果我希望“新值”成为我传入的参数。我是否只需执行onChange = (id) => { this.setState(prevState => ({ tags: [...prevState.tags, id] })); }
如何将新值添加到数组中的特定位置？
@PubuduJayasanka setFoo(prevState => [...prevState.slice(0, pos), newItem, ...prevState.slice(pos)]) 带有钩子，但您可以在类组件中的特定键上使用类似的传播模式。

【解决方案3】：

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

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

【讨论】：

我发现这是最有表现力和最简洁的方法。
将此更改为接受的答案，因为它不仅是最后一个冗长的，而且根据 jsperf 也是最快的解决方案
如果未按预期顺序调用 setState，这可能会导致状态不同步。最好使用 setState(prevState, ...)。

【解决方案4】：

如果您使用的是 ES6 语法，则可以使用 spread operator 将新项目添加到现有数组中作为一个衬里。

// Append an array
const newArr = [1,2,3,4]
this.setState(prevState => ({
  arr: [...prevState.arr, ...newArr]
}));

// Append a single item
this.setState(prevState => ({
  arr: [...prevState.arr, 'new item']
}));

【讨论】：

【解决方案5】：

如果您想继续向我一直使用的数组添加新对象：

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

【讨论】：

【解决方案6】：

handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.push(value)
      this.setState({
         myArr
     })

这可能会起作用。

【讨论】：

【解决方案7】：

现在最好的。

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

【讨论】：

我想知道如何将新值插入到数组的中间而不是添加到末尾？

【解决方案8】：

onChange() {
     const { arr } = this.state;
     let tempArr = [...arr];
     tempArr.push('newvalue');
     this.setState({
       arr: tempArr
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

【解决方案9】：

这可能不会直接回答您的问题，而是为了那些带有以下状态的问题

 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] })

【讨论】：

【解决方案10】：

对于带有钩子的功能组件

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]);

来源：https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

【讨论】：

"setSearches(searches => searchs.concat(query)); "是2021年迄今为止最好的解决方案，谢谢大王。

【解决方案11】：

使用 Hook 的快捷方式：

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

【讨论】：