Каков наилучший способ добавить значение в массив в состоянии

У меня есть массив в состоянии, скажем 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, и поэтому всегда сначала делать копию в памяти

Ответы

Ответ 1

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

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

Ответ 2

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

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

Ответ 3

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

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

Ответ 4

Если вы используете синтаксис 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']
}));

Ответ 5

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

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

Ответ 6

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>

Ответ 7

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

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

Ответ 8

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

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

Ответ 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] })