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

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

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

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

Ответ 1

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

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

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

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

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

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

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

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

Ответ 2

С помощью es6 это можно сделать следующим образом:

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

Синтаксис распространения

Ответ 3

  Никогда не рекомендуется напрямую изменять состояние.

Рекомендуемый подход в более поздних версиях React заключается в использовании функции обновления при изменении состояний для предотвращения состояний гонки:

Вставить строку в конец массива

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

Вставить строку в начало массива

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

Выдвинуть объект в конец массива

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

Переместить объект в начало массива

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 6

Реагировать-Native

если вы также хотите, чтобы ваш пользовательский интерфейс (т.е. ur flatList) был актуальным, используйте PrevState: в приведенном ниже примере, если пользователь нажимает кнопку, он собирается добавить новый объект в список (как в модели, так и в интерфейсе пользователя)

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

Ответ 7

Этот кодекс работает для меня:

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})