antd中的form表单 initialValue导致数据不更新问题
初步理解 : initialValue就是所謂的defaultValue,只會在第一次賦值的時候改變,卻又有一些不同,因為 initialValue又會因其他改動而改變。 然而當獲取的數據重新上來要渲染的時候 ,initialValue的值卻又不改變,所以 讓人覺得很是捉摸不透。
解決:````this.props.form.resetFields();```
例:如果第一步操作執行的是修改操作,一些默認值填充上去,如果不作處理,第二部執行新增操作的時候,會把第一個默認的值帶著,導致新增彈框彈出來的時候form表單中就是數值,效果體驗特別不好,
后面發現在Modal文件里面添加componentWillReceiveProps中處理報表重置,就可以刷新form表單
componentWillReceiveProps(nextProps) {if (!nextProps.modal.modalUpdateDetail) {this.props.form.resetFields();}?
后來還是會在同樣的坑里面跳 但這回不是在Modal里的Form,而是在類似TAB組件切換數據的時候,this.state的內容變了,但是render的initialValue還是保留著原來的數據 解決方法 1 我第一想到的是強制刷新,window.location.reload() 但這樣的辦法并不是理想的效果
2 治根還得治本,我知道是initialValue的問題 但如果參考原來的在componentWillReceiveProps里面重置表單數據,會出現其他各種問題,因為```componentWillReceiveProps``這個函數你可能因為別的原因觸發了
componentWillReceiveProps(nextProps) {if (!nextProps.modal.modalUpdateDetail) {this.props.form.resetFields();}后來想著,既然是因為initialValue已經有了初始化,那在切換操作的時候,將它清除掉好了,所以在離開的操作函數里添加 了?this.props.form.resetFields();
作者:sbwxffnhc
鏈接:https://juejin.im/post/5c67e01651882562a12ad79b
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
轉載于:https://www.cnblogs.com/lanshu123/p/10966395.html
總結
以上是生活随笔為你收集整理的antd中的form表单 initialValue导致数据不更新问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 看完就懂系列—动态规划
- 下一篇: 73-递归函数1:阶乘