在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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)題

  1. 為啥會(huì)出現(xiàn)這種情況,文檔上不是說(shuō)會(huì)在componentWillReceiveProps()造成死循環(huán)么?為啥我其他生命周期里面也會(huì)?
  2. 使用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
編輯回答
解夏

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

如果是這樣,根本沒(méi)有用到需要setFieldsValue的場(chǎng)景啊,也沒(méi)有需要使用React的幾個(gè)生命周期。

你看過(guò)文檔了嗎?你的場(chǎng)景可以滿足?。?br>https://ant.design/components...

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

最后使用mapPropsToFields解決的表單回填的問(wèn)題

2017年6月5日 04:52