React.js：更新表单后，无法在组件内获取更新的值（`componentWillReceive`）答案

【问题标题】：React.js: After updating form, not able to get updated value (`componentWillReceive`) inside a componentReact.js：更新表单后，无法在组件内获取更新的值（`componentWillReceive`）
【发布时间】：2018-11-24 22:23:09
【问题描述】：

我们从服务器获取一个允许用户编辑的表单，并使用 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.log("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 reactjs redux state

【解决方案1】：

您的onChange 函数在某些表单值更改时触发。我不知道setCurrentForm 的功能是什么，但如果它改变了与表单相关的数据，我们这里就有无限循环。用户更改了表单文本值，onChange 触发并运行 setCurrentForm 函数。最后一个变异表单文本值，onChange 函数再次被触发。我认为这是问题所在。

【讨论】：

谢谢。是的，setCurrentForm 正在尝试将更新后的表单设置为状态。我们尝试使用 componentWillReceiveProps，但无法将更新后的状态作为道具取回。我们尝试将我们的操作放在 onChange 函数中，当用户输入一个值时它会正确更改状态。但是当我们完成输入时，它会返回空字符串值，因为它无法将更新状态作为道具更新到组件，然后 onChange 函数会再次触发操作，因为输入的值为空。
有没有办法解决这个问题并将更新后的表单设置为状态，这样我们就可以在不导致无限循环或将值设置为空的情况下取回它？
当然，尝试将当前用户输入及其处理与状态分开。让表单逻辑在其内部运行并仅在用户提交时更新表单。我昨天做了同样的事情：一个用于添加具有多个输入标签的元素的表单。但是它们不受状态约束，它们将初始值作为道具获取，当用户单击提交时，我的函数 onSave 运行 dispatch(action) 以更新商店。这里应该是用户输入和状态之间的一种缓冲，否则循环是不可避免的。
并且仅在用户提交时更新表单。 ===== 我的意思是，对不起：只有在用户提交 FORM 时才更新状态。
谢谢！为迟到的回复道歉。我们正在尝试使用 onChange，而不是提交。我们创建了一个代码沙箱； codesandbox.io/s/oo3qknl296 我们的要求是我们将从服务器接收 formData 的初始状态，并且我们需要仅使用路径更新它的特定部分（例如 task[0].title 或 task.title 就像在示例中一样）。正如您在沙箱中看到的那样，我们实现了该功能并将其放入 onChange 函数中。但是，如果我们取消注释我们尝试设置更新状态的位置，我们会看到错误 Maximum update depth exceeded...