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方法
         })
    })
  • 相关阅读:
    AS400一些有用的命令
    Publish的时候某些需要用到的文件没deploy上去
    DB2一些SQL的用法
    根据PostgreSQL 系统表查出字段描述
    linux memcached 安装
    CentOS下XEN虚拟服务器安装配置
    Apache the requested operation has failed
    PHP配置兼容ZendDebugger和Optimizer
    虚拟机比较
    memcache 运行情况,内存使用
  • 原文地址:https://www.cnblogs.com/cirry/p/12483131.html
Copyright © 2011-2022 走看看