zoukankan      html  css  js  c++  java
  • [Antdvue] Warning: You cannot set a form field before rendering a field associated with the value.

    在用ant-design-vue的框架中,使用到了这种场景,就是点击编辑按钮,弹出modal模态框,渲染modal模态框中的form表单页面,并给表单赋值,但是在给表单赋值的时候,总是会报错。

    错误提示: Warning: You cannot set a form field before rendering a field associated with the value.

    经过一番查找后发现,造成这种原因一般有以下几个原因:

    1.使用了表单的方法setFieldsValue(),来设置一组输入控件的值,传入的值为object,但是传入的值要和表单的值一一对应,能少传不能多传

    遇到这种情况的解决方式为:form渲染需要什么值你就传什么值

    方式1:一个一个传

     this.form.setFieldsValue({ note: '123', mark: '456' })

    方式2:

    add (record) {  //record:需要引用的值
       this.visible = true
       this.mdl = Object.assign({}, record)  // 浅拷贝
       this.form.setFieldsValue(pick(this.mdl, 'note', 'mark'))  // loadsh的pick方法
    }

    但是你会发现这么些还是报同样的错误。按照错误提示的原意:不能在表单渲染之前赋值

    2.调用setFieldsValue()方法,需要放在$nextTick()函数中执行,改为如下即可:

    this.$nextTick(()=>{
        this.form.setFieldsValue(pick(this.mdl, 'note', 'mark'))  // loadsh的pick方法
    })

    一般到这里就能解决问题了,如果还在报同样的错误,那就这样吧:

    3.再放到setTimeout()方法中

    this.$nextTick(() => {
         setTimeout(() => {
         this.form.setFieldsValue(pick(this.mdl, 'note', 'mark'))  // loadsh的pick方法
         })
    })
  • 相关阅读:
    MT【111】画图估计
    MT【110】巧设法向量解决距离问题
    a++为啥不能用作左值
    qt之正则表达式
    QtWebkit中如何将网页内容转为图片
    数字图像去雾快速算法
    基于AdaBoost的人脸检测
    谈谈自动瘦脸和自动眼睛放大算法
    QT_opengl_gluPerspective没有定义的处理方法
    OpenGL框架+QT版
  • 原文地址:https://www.cnblogs.com/cirry/p/12483131.html
Copyright © 2011-2022 走看看