ant渲染表单错误：Warning: You cannot set a form field before rendering a field associated with the

最新推荐文章于 2023-02-03 16:46:41 发布

本是后山人

最新推荐文章于 2023-02-03 16:46:41 发布

阅读量5.3k

点赞数 2

文章标签： ant vue

本文链接：https://blog.csdn.net/sinat_36707441/article/details/104815136

版权

多数解决方案：

const that = this;
//res为查询结果
 that.$nextTick(() => {
    detailform.setFieldsValue({
    goods_number: res.order.goods_number,
    goods_name: res.goods_name,
    });
});

//res为查询结果
setTimeout(()=>{
    this.props.detailform.setFieldsValue({
    goods_number: res.order.goods_number,
    goods_name: res.order.goods_name,
    });
},100);

解释：因为表单页面还没完全渲染完成，所以延迟后再给表单赋值。

其他解决方案：

1.映入库

import pick from 'lodash.pick'

2.给动态表单赋值

//res为查询结果
this.form.setFieldsValue(_.pick(res.order, Object.keys(this.form.fieldsStore.fieldsMeta)));

解释：因为表单某些字段是通过查询结果后再判断是否渲染出来的，所以这里this.form.fieldsStore.fieldsMeta是为了获取渲染后的所有表单字段，通过pick从res.order中拿出对应的字段，再通过setFieldsValue给表单赋值，这就能保证setFieldsValue里赋值的字段是存在的。