将对象写入状态答案

【问题标题】：Write object to state将对象写入状态
【发布时间】：2020-01-14 08:19:43
【问题描述】：

需要通过点击注册来将填写字段的对象转移到状态dataChanged

https://codesandbox.io/s/validation-devextreme-form-fso31

问题在于设置dataChanged 状态时的onFieldDataChanged 属性。错误：

已超过最大更新深度。这可能发生在组件在 componentWillUpdate 内重复调用 setState 或组件更新。 React 将嵌套更新的数量限制为防止无限循环

<Form
            formData={customer}
            readOnly={false}
            showColonAfterLabel={true}
            showValidationSummary={true}
            validationGroup="customerData"
            onFieldDataChanged={e => {
              let newData = e.component.option("formData");
              this.setState({
                dataChanged: newData
              });
            }}
>

【问题讨论】：

我在回调中删除了console.log('field data changed', e.component.option("formData"))，似乎对我有用，我看到它是在字段模糊时触发的。你有完整的重现步骤列表吗？
我没有。在codesanbox上运行正常，但是在本地项目中出现这个错误，虽然一切都一样
它们是否完全相同，所有版本的反应，本地 package.json 文件中的所有内容都与您的沙箱相同？您的组件代码没有使用 componentWillUpdate 或 componentDidUpdate 生命周期函数。错误/警告是否还有更多信息，例如堆栈跟踪，可以帮助确定错误的来源？
完全一样。 “this.setState({dataChanged: newData});”行出错

标签： javascript reactjs devexpress devextreme

【解决方案1】：

不要在箭头函数中调用 setState 作为 prop，而是创建如下函数：

onFieldChangeHandler = (e) => {
    const newData = e.component.option("formData");
    this.setState({
        dataChanged: newData
    });
}

在你的 Form 组件的 props 中：

onFieldDataChanged={this.onFieldChangeHandler}

【讨论】：

“ShortForm.jsx:39 Uncaught TypeError: e.persist is not a function”。没有“e.persist”可以正常工作！ e.persist 有必要吗？
在你的情况下..我不认为这是必需的。我将修改答案并将其删除！如果像this medium article和react官网second note那样异步调用setState是必须的。如果你异步调用它，当你使用e时，它已经被无效了。