react,antd使用setFieldsValue表单回填死循环

Question

业务场景

一个table，每条tr可以修改。修改就是弹出一个
<Modal destroyOnClose modifyData={data}/>,
Modal里面一个Form。这里使用setFieldsValue进行表单回填。由于页面初始化的时候就mounted了Modal，所以componentDidMount()就只运行了一次。

过程

所以我就分别在componentWillReceiveProps(), shouldComponentUpdate(), render(), componentDidUpdate(),几个生命周期里调用了this.props.form.setFieldsValue(this.props.modifyData)。
运行结果是不但弹出没打开，还造成了死循环。

问题

1. 为啥会出现这种情况，文档上不是说会在componentWillReceiveProps()造成死循环么？为啥我其他生命周期里面也会？
2. 使用antd的form在这种场景下表单回填的思路是什么。我的理解是，类似于VUE的watch，我只要知道this.props.modifyData发生变化，然后再去执行setFieldsValue从而动态的改变表单的值。然而react好像并没有类似watch这样的功能，因此我就只好在生命周期里使用。（ps:发现打开和关闭modal，都会触发update的生命周期。)
   不知道这样理解对不对

Answer 1

setFieldsValue 放在你 Modal 确定函数中执行

Answer 2

你想复杂了。
我理解一下，你就是想给一个table去进行编辑操作：点击一行，弹出modal，然后编辑，点击确定关闭modal。让修改的数据渲染进table。是吧？

如果是这样，根本没有用到需要setFieldsValue的场景啊，也没有需要使用React的几个生命周期。

你看过文档了吗？你的场景可以满足啊：
https://ant.design/components...

Answer 3

1.因为antd的form是绑定了组件的props的。所以你直接在componentWillReceiveProps里setFieldsValue是会触发componentWillReceiveProps的，进入死循环
2.在render里setFieldsValue也一样会进入死循环

Answer 4

最后使用mapPropsToFields解决的表单回填的问题

Answer 5

<Modal destroyOnClose modifyData={data} destroyOnClose={true}/>,再在componentDidMount中修改就行了；

destroyOnClose 关闭时销毁 Modal 里的子元素

Answer 6

setFieldsValue 官方文档也明确表示不要在componentWillReceiveProps 中去设置，否则会陷入死循环的！因为你操作的就是props；只要props更改了，就回去执行componentWillReceiveProps这个方法！