内存-在s中向数组添加值的最佳方法是什么

我有一个状态数组,比如this.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})
}

所以..我知道this.state应该被视为不可变的。 但是可以像在选项1中那样使用它还是可以设置状态的呢?还是我需要使用像选项2这样的东西,因此总是先在内存中进行复制

Flion asked 2020-02-17T23:30:34Z
9个解决方案
66 votes

目前,这是最好的方法。

this.setState(previousState => ({
    myArray: [...previousState.myArray, 'new value']
}));
Kutsan Kaplan answered 2020-02-17T23:31:08Z
57 votes

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

onChange(event){
    var newArray = this.state.arr.slice();    
    newArray.push("new value");   
    this.setState({arr:newArray})
}
Butters answered 2020-02-17T23:31:29Z
39 votes

如果使用的是ES6语法,则可以使用散布运算符将新项目作为一个衬里添加到现有阵列中。

// 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']
}));
JamieD answered 2020-02-17T23:31:49Z
19 votes

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

this.setState({
  arr: this.state.arr.concat('new value')
})
TiagoLr answered 2020-02-17T23:30:48Z
3 votes

现在最好的了。

this.setState({ myArr: [...this.state.myArr, new_value] })
Pycc34 answered 2020-02-17T23:32:08Z
2 votes

<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>
<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>

SAMAR answered 2020-02-17T23:33:29Z
1 votes
handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.push(value)
      this.setState({
         myArr
     })

这可能会完成工作。

Harshit Singhai answered 2020-02-17T23:33:48Z
0 votes

如果要继续向数组中添加新对象,请使用以下方法:

_methodName = (para1, para2) => {
  this.setState({
    arr: this.state.arr.concat({para1, para2})
  })
}
Mygel Bergstresser answered 2020-02-17T23:34:08Z
0 votes

这可能不会直接回答您的问题,但是为了解决诸如以下所示的问题

 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] })
Excellent Lawrence answered 2020-02-17T23:34:37Z
translate from https://stackoverflow.com:/questions/26505064/what-is-the-best-way-to-add-a-value-to-an-array-in-state