SetState не очищает выбранные значения - React
У меня есть кнопка, которая отправляет выбранные значения в API. После того, как это было отправлено, я затем пытаюсь отключить состояние кнопки, чтобы отключить и вернуть значения, выбранные обратно в исходное состояние, прежде чем выбрать там, где они были выбраны.
Это то, что я делаю с дескриптором загрузки:
handleStatusEditsUpload = () => {
const { value, status } = this.state;
this.setState({
value: selected,
status: {}
});
};
В моей реальной версии локально статус очищается, статус используется при одновременном изменении всех значений путем нажатия на заголовок заголовка, появляется диалоговое окно для изменения всех значений в этом столбце.
Основная проблема, с которой я столкнулся, связана со значением. Значение заполняется новым массивом, который просматривает ячейку и строку таблицы.
Вот демонстрация моего проекта: https://codesandbox.io/s/50pl0jy3xk
Почему не меняется состояние? любая помощь приветствуется, как всегда.
это постоянная сверху
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я только что запустил ваш код в предоставленной вами песочнице, и он выдает ошибки, когда вы нажимаете кнопку подтверждения (пытаясь распространить неитерируемый код). Как только это будет исправлено, состояние обновится корректно. Смотрите мою вилку ниже:
https://codesandbox.io/s/385y99575m
Я оставил несколько журналов консоли, чтобы вы могли видеть, как обновляется состояние компонента при срабатывании вашего onClick.
Почему вы передаете свои реквизиты методу handleStatusEditsUpload? Это не требует аргументов. Было ли это просто частью вашего процесса отладки?
Думаю, я мог неправильно понять ваш вопрос здесь. Какое значение вы ожидаете вернуть в результате обновления состояния? В соответствии с кодом вам нужен массив объектов, каждый из которых имеет три свойства. Прямо сейчас это не работает, так как ваш selected const каким-то образом обновляется. Как, черт возьми, это происходит, я понятия не имею.
Спасибо @tombraider
Происходит то, что вы изменяете состояние в своем методе «handleValue».
const newValue = [...this.state.value]; // this holds reference
newValue[rowIdx][cellIdx] = val; // so that here your state is mutated ( and const "selected" with it)
В долгосрочной перспективе вам, вероятно, следует немного изменить структуру данных, чтобы было проще объединять обновления со значением вашего состояния. Но быстрым решением было бы клонировать значение состояния перед его изменением:
handleValue = (event, val, rowIdx, cellIdx) => {
const newValue = _.cloneDeep(this.state.value); // no reference anymore
newValue[rowIdx][cellIdx] = val; // update the cloned value
this.setState({
value: newValue
});
};
Отличный улов. Я понятия не имел, что исходная ссылка все еще будет существовать при инициализации состояния из переменной, но это имеет смысл, если подумать.
Спасибо, ребята, имеет смысл. Быстрое исправление в этом случае не работает. клонГлубокий
О, у вас есть еще одна ошибка с вашим примером кода: замените кнопки отправки onClick на onClick = {this.handleStatusEditsUpload}. Если вам нужно использовать свойства в этом методе, вам не нужно передавать их из рендеринга, но вы можете напрямую использовать this.props в методе.
выбранный не определен в вашем фрагменте кода