Правильный способ ввода в массив состояний

Question

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

this.setState({ myArray: this.state.myArray.push('new value') }) 

Но я считаю, что это неправильный путь и вызывает проблемы с изменчивостью?

Answer 1

массив толчок возвращает длину

this.state.myArray.push('new value') возвращает длину расширенного массива, вместо самого массива.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push

Я думаю, вы ожидаете, что возвращаемое значение будет массив.

Неизменность

Кажется, это скорее поведение React:

НИКОГДА не мутировать this.state непосредственно, как вызов SetState() впоследствии может заменить мутацию вы сделали. Относитесь к this.state, как если бы это было неизменяемым.

https://facebook.github.io/react/docs/component-api.html

Я думаю, вы могли бы сделать это так (не знаком с React):

var joined = this.state.myArray.concat('new value'); 
this.setState({ myArray: joined }) 

Answer 2

Вы можете использовать .concat метод для создания копии вашего массива с новыми данными:

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

Но остерегайтесь особого поведения метода .concat при передаче массивов - [1, 2].concat(['foo', 3], 'bar') приведет к [1, 2, 'foo', 3, 'bar'].

Answer 3

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

var newStateArray = this.state.myArray.slice(); 
newStateArray.push('new value'); 
this.setState(myArray: newStateArray); 

Работа с объектом государства напрямую нежелательна. Вы также можете взглянуть на помощников по неизменности React.

https://facebook.github.io/react/docs/update.html

Answer 4

Использование ES6 это можно сделать так:

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value 
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array 

Spread syntax