React.js: после обновления формы невозможно получить обновленное значение (`componentWillReceive`) внутри компонента
Мы получаем с сервера форму, которую мы позволяем пользователю редактировать, и используем lodash _.set(object, path, value) для обновления частей этой формы в зависимости от того, какую часть формы обновляет пользователь.
Мы пытаемся получить текущее значение, задав состояние внутри компонента, но получаем эту ошибку;
Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops
Наша функция выглядит так:
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
let prevForm = this.props.form;
// update the object using
const updatedForm = _.set(prevForm, path, inputValue);
// action
this.props.setCurrentForm(updatedForm); };
Мы также безуспешно пробовали следующее:
onChange = ({ form }) => {
const { path, editKeyword } = this.props;
const inputValue = form[editKeyword];
console.info("input value ", inputValue);
let prevForm = this.props.form;
const updatedForm = _.set(prevForm, path, inputValue);
// when we try to update local state
this.setState({ form: updatedForm}) };
Кому-нибудь повезло с этим?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваша функция onChange срабатывает при изменении некоторых значений формы. Я не знаю, что делает функция setCurrentForm, но если она изменяет данные, относящиеся к форме, у нас здесь бесконечный цикл.
Пользователь изменил текстовое значение формы, onChange срабатывает и запускает функцию setCurrentForm. Последнее изменение формы текстового значения, и функция onChange снова запускается. Думаю, в этом проблема.
Есть ли способ обойти это и установить обновленную форму в состояние, чтобы мы могли вернуть ее, не вызывая бесконечный цикл или значение, которое будет установлено как пустое?
Конечно, постарайтесь отделить текущий ввод пользователя и его обработку от состояния. Позвольте логике формы работать внутри себя и обновлять форму только тогда, когда пользователь отправляет ее. Вчера сделал то же самое: форму для добавления элемента с несколькими тегами ввода. Но они не связаны с состоянием, они получают свои начальные значения как реквизиты, и когда пользователь нажимает кнопку «Отправить», моя функция onSave запускает отправку (действие) для обновления магазина. Здесь должен быть своего рода буфер между пользовательским вводом и состоянием, иначе цикл неизбежен.
и обновлять форму только тогда, когда пользователь отправляет ее. ===== Я имел в виду это, извините: и обновляйте STATE только тогда, когда пользователь отправляет FORM.
Спасибо! извиняюсь за поздний ответ. Мы пытаемся использовать onChange вместо submit. Мы создали песочницу кода; codeandbox.io/s/oo3qknl296 Наше требование состоит в том, чтобы мы получали исходное состояние formData с сервера, и нам нужно обновить определенную его часть, используя только путь (например, task[0].title или task.title, как в примере). Мы достигли этой функциональности и поместили ее в функцию onChange, как вы можете видеть в песочнице. Однако, если раскомментировать, где мы пытаемся установить обновленное состояние, мы увидим ошибку Maximum update depth exceeded...
UPD: совет для понимания: при перезагрузке песочницы смотрите в консоль. Следующая строка после «Консоль была очищена» идет строка «входное значение не определено», - это вывод console.info из обработчика onChange. Итак, как мы видим, onChange запускается реакцией до того, как пользователь взаимодействует с формой. Реагировать на переданное состояние компоненту и запускать событие onChange. Поместите изменение состояния внутри onChange, и наш цикл будет выглядеть так: redux -> react-> component-> form-> onChange-> STATE CHANGES -> redux -> react ... - теперь вы знаете, что будет дальше :-)
Потрясающий! Спасибо за это и за разъяснение шлейфа! Оставшаяся проблема для нас заключается в том, что мы используем onChange для запуска функции автосохранения обновленной формы. Есть ли способ по-прежнему использовать onChange, избегая этого цикла? Поскольку у нас (в соответствии с бизнес-требованиями) не может быть фактической кнопки «отправить», я не уверен, без использования onChange, как отслеживать изменения в форме, чтобы мы могли автоматически запускать функцию автосохранения.
Извините, я зря потратил ваше время. Вот решение: codeandbox.io/s/9lkmwo61v4. Измените входы и посмотрите на Консоль.
Спасибо. Да,
setCurrentFormпытается установить обновленную форму в состояние. Мы попытались использовать componentWillReceiveProps, но не смогли вернуть обновленное состояние в качестве реквизита. Мы попытались поместить свое действие в функцию onChange, и она правильно меняет состояние, когда пользователь вводит значение. Но когда мы закончим ввод, он вернется к пустому строковому значению, поскольку он не может получить обновленное состояние для компонента в качестве реквизита, а затем функция onChange снова запускает действие, потому что значение ввода пусто.