Правильный способ вставки в массив состояний
Кажется, у меня возникают проблемы с нажатием данных в массив состояний.
Я пытаюсь добиться этого таким образом:
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)})
})