Обновление одного значения в массиве состояний реагирует родной
Пытаясь обновить один элемент массива в this.state, я получаю (ожидаемую) ошибку, но не вижу, где я ошибся. Нужно ли мне создать временное обновление массива, а затем вернуть весь массив в состояние
Это по сути то, что у меня есть
this.state = { array: ['a', 'b', 'c'] };
onBack() {
this.setState({
array[2]: 'something'
});
}
@ DragoşPaulMarinescu прав, и этот подход - лучший подход!
Ответы 5
Используйте Object.assign ({});
let array= Object.assign({}, this.state.array); //creating copy of object
array[2] = "something"
this.setState({array});
Ответ Маноджа будет работать, есть другой способ использовать функцию обновления (конечный setState) для setState (о которой вы можете прочитать о здесь)
onBack() {
this.setState(prevState => {
let newArray = prevState.array
newArray[2] = "something"
return { array: newArray }
});
}
Вы не можете так обновить состояние.
Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
Прочтите React docs.
Вы можете сделать что-то вроде этого:
let newArray = [...this.state.array];
newArray[2] = 'somethingElse';
this.setState({array: newArray});
В приведенном выше примере используется Распространение синтаксиса.
Есть несколько способов изменить состояние, но все они должны гарантировать, что данные обрабатываются как неизменяемые. Вы можете узнать больше об обработке состояния в React здесь
проголосовали за подход оператора распространения, а также просто за дополнительные знания, что будет лучше для производительности: прямая мутация состояния или использование оператора распространения?
непосредственное изменение будет быстрее, так как вам не нужно создавать копию, но это приведет к несогласованному состоянию, и этого никогда не следует делать. Оператор распространения в основном создает копию исходного массива.
Создайте временное обновление массива, которое затем верните весь массив в состояние
var arr = [];
arr = this.state.array;
arr[2] = "something";
this.setState({
array : arr
});
Это неправильно, так как это напрямую изменяет состояние. arr = this.state.array НЕ ведет себя так, как вы ожидаете.
Я попытался использовать свой собственный демонстрационный проект, и он отлично работает, как того хочет OP.
Потому что это в корне неверно и не должно быть общепринятым ответом. arr = this.state.array не создает новый массив, а создает ссылку на state.array. Попробуйте записать в консоль this.state.array после того, как сделаете arr[2] = "something", и посмотрите, что произойдет.
Вы явно не понимаете неизменность и то, что я пытаюсь объяснить, поэтому я просто остановлюсь.
Извините за это, и спасибо за очистку концепции неизменяемого состояния, я погуглил и попытался понять то же самое.
Когда вы делаете arr[2], вы напрямую изменяете то, что находится в состоянии. Это не лучшая идея. Кроме того, поскольку вы напрямую изменяете состояние, нет смысла использовать setState, поскольку состояние уже было изменено на предыдущем шаге.
Если вы беспокоитесь о том, чтобы установить новый обновленный массив на вашем currentArray с помощью функции распространения, вы можете использовать Array.from(duplicateArray)
let duplicateArray = [...currentArray] //duplicate the array into new array
duplicateArray[index].value = 'x'; // update the field you want to update
setCurrentArray(Array.from(duplicateArray )) //set the new updated array into currentArray
Меня беспокоит эта проблема, я просто ищу, и я увидел эту идею, и она работает! https://github.com/facebook/react-native/issues/21734#issuecomment-433885436
Do I need to create a temporary array update that, then assign the whole array back to the stateда