博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
antd中的form表单 initialValue导致数据不更新问题
阅读量:5984 次
发布时间:2019-06-20

本文共 1128 字,大约阅读时间需要 3 分钟。

初步理解 : 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

你可能感兴趣的文章
Linux:shell登录过程
查看>>
linux 交叉编译出现的问题
查看>>
LruCache的缓存策略
查看>>
Android解析WindowManager(一)WindowManager体系
查看>>
MapReduce中的map个数
查看>>
开源框架:SDWebImage
查看>>
vue 更改数组里的数据的坑
查看>>
C++中抽象类和接口类的区别
查看>>
【中文】Joomla1.7扩展介绍之 K2(内容建设)
查看>>
Flex Label组件扩展边框与背景
查看>>
DOM相关知识总结
查看>>
类加载器、反射,反射的应用实例(泛型擦除和配置文件)
查看>>
外企面试课程(一)---熟悉常见的缩略词
查看>>
CSS3 线性渐变linear-gradient
查看>>
第八周作业
查看>>
P1067 多项式输出
查看>>
javascript常见内存泄露
查看>>
CSS格式模板
查看>>
jvm垃圾回收器与内存分配策略
查看>>
机器学习之svm---cv wiki svm
查看>>