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

Question

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

Answer 1

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

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

Answer 2

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

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

Answer 3

Другой простой способ использования CONCAT:

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

Answer 4

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

// 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'] });