zoukankan      html  css  js  c++  java
  • 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
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



  • 相关阅读:
    在linux写一个shell脚本用maven git自动更新代码并且打包部署
    maven mvn 命令行 编译打包
    linux修改文件为可执行文件
    shell脚本中根据端口号kill对应的应用进程
    linux如何查看端口被哪个进程占用?
    LINUX中如何查看某个端口是否被占用
    The JAVA_HOME environment variable is not defined correctly的错误
    Linux配置Java环境变量
    requests
    https://www.cnblogs.com/zheting/category/1086753.html
  • 原文地址:https://www.cnblogs.com/lanshu123/p/10966395.html
Copyright © 2011-2022 走看看