it-roy-ru.com

React.js - Как лучше всего добавить значение в массив в состоянии

У меня есть массив в состоянии, скажем, 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})
}

Итак ... Я знаю, что это состояние должно рассматриваться как неизменное. Но нормально ли это использовать, как в варианте 1, где я все еще устанавливаю его состояние, или мне нужно использовать что-то вроде варианта 2 и, таким образом, всегда сначала делать копию в памяти 

40
Flion

Оба предоставленных вами варианта одинаковы. Оба они по-прежнему будут указывать на один и тот же объект в памяти и иметь одинаковые значения массива. Вы должны рассматривать объект состояния как неизменяемый, как вы сказали, однако вам нужно заново создать массив, чтобы он указывал на новый объект, устанавливал новый элемент, а затем сбрасывал состояние. Пример:

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

На данный момент это лучший способ.

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

Если вы используете синтаксис ES6, вы можете использовать оператор spread , чтобы добавить новые элементы в существующий массив в виде одной строки.

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

// Append a single item
this.setState({ arr: [...this.state.arr, 'new item'] });
30
JamieD

Еще один простой способ использования concat:

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

сейчас самое лучшее.

this.setState({ myArr: [...this.state.myArr, new_value] })
0
Pycc34
handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.Push(value)
      this.setState({
         myArr
     })

Это может сделать работу.

0
Harshit Singhai

Если вы хотите продолжать добавлять новый объект в массив, который я использовал:

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