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

業(yè)務(wù)場(chǎng)景

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

過(guò)程

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

問(wèn)題

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

回答

編輯回答

話寡

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

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

2018年5月28日 09:14

編輯回答

殘淚

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

2018年2月10日 18:57

編輯回答

嘟尛嘴

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

2017年8月27日 20:06

編輯回答

夢(mèng)一場(chǎng)

setFieldsValue 官方文檔也明確表示不要在componentWillReceiveProps 中去設(shè)置，否則會(huì)陷入死循環(huán)的！因?yàn)槟悴僮鞯木褪莗rops；只要props更改了，就回去執(zhí)行componentWillReceiveProps這個(gè)方法！

2017年4月19日 11:05

編輯回答