鍍金池/ 問答/HTML/ react,antd使用setFieldsValue表單回填死循環(huán)

react,antd使用setFieldsValue表單回填死循環(huán)

業(yè)務(wù)場景

一個table，每條tr可以修改。修改就是彈出一個
<Modal destroyOnClose modifyData={data}/>,
Modal里面一個Form。這里使用setFieldsValue進行表單回填。由于頁面初始化的時候就mounted了Modal，所以componentDidMount()就只運行了一次。

過程

所以我就分別在componentWillReceiveProps(), shouldComponentUpdate(), render(), componentDidUpdate(),幾個生命周期里調(diào)用了this.props.form.setFieldsValue(this.props.modifyData)。
運行結(jié)果是不但彈出沒打開，還造成了死循環(huán)。

問題

  1. 為啥會出現(xiàn)這種情況，文檔上不是說會在componentWillReceiveProps()造成死循環(huán)么？為啥我其他生命周期里面也會？
  2. 使用antd的form在這種場景下表單回填的思路是什么。我的理解是，類似于VUE的watch，我只要知道this.props.modifyData發(fā)生變化，然后再去執(zhí)行setFieldsValue從而動態(tài)的改變表單的值。然而react好像并沒有類似watch這樣的功能，因此我就只好在生命周期里使用。（ps:發(fā)現(xiàn)打開和關(guān)閉modal，都會觸發(fā)update的生命周期。)
    不知道這樣理解對不對
回答
編輯回答
話寡

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

destroyOnClose 關(guān)閉時銷毀 Modal 里的子元素

2018年5月28日 09:14
編輯回答
殘淚

1.因為antd的form是綁定了組件的props的。所以你直接在componentWillReceiveProps里setFieldsValue是會觸發(fā)componentWillReceiveProps的，進入死循環(huán)
2.在render里setFieldsValue也一樣會進入死循環(huán)

2018年2月10日 18:57
編輯回答
嘟尛嘴

setFieldsValue 放在你 Modal 確定函數(shù)中執(zhí)行

2017年8月27日 20:06
編輯回答
夢一場

setFieldsValue 官方文檔也明確表示不要在componentWillReceiveProps 中去設(shè)置，否則會陷入死循環(huán)的！因為你操作的就是props；只要props更改了，就回去執(zhí)行componentWillReceiveProps這個方法！

2017年4月19日 11:05
編輯回答
解夏

你想復(fù)雜了。
我理解一下，你就是想給一個table去進行編輯操作：點擊一行，彈出modal，然后編輯，點擊確定關(guān)閉modal。讓修改的數(shù)據(jù)渲染進table。是吧？

如果是這樣，根本沒有用到需要setFieldsValue的場景啊，也沒有需要使用React的幾個生命周期。

你看過文檔了嗎？你的場景可以滿足?。?br>https://ant.design/components...

2018年9月22日 16:33
編輯回答
青檸

最后使用mapPropsToFields解決的表單回填的問題

2017年6月5日 04:52