Ant表单出现“You cannot set a form field before rendering a field associated with the value”

今天在做ant表单回显的时候出现You cannot set a form field before rendering a field associated with the value是因为先赋值了，但是表单还没有渲染，所有延迟就好了setTimeout(()=>{this.props.form.setFieldsValue({'userName':name})},0)......

pretty_girls

1130人浏览 · 2020-08-05 17:35:58

pretty_girls · 2020-08-05 17:35:58 发布

今天在做ant表单回显的时候出现

You cannot set a form field before rendering a field associated with the value
是因为先赋值了，但是表单还没有渲染，所有延迟就好了

 setTimeout(()=>{
            this.props.form.setFieldsValue({
                'userName':name
            })
        },0)

这种是我在使用ant表单实现这个效果时候回显遇到的问题
在这里插入图片描述
ant4.0的这种格式表单是封装好了的，但是自己的没有升级是ant3.0所以要自己来封装了

    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
const formItems = keys.map((k, index) => (
      <div key={k} style={{ backgroundColor: "#fff", paddingLeft: "10px" }}>
        <Row gutter={16}>
          <Col span={7}>
            <Form.Item
              label={index === 0 ? '参数名称' : ''}
              required={false}
            >
              {
                getFieldDecorator(`names[${k}].name`, {
                  validateTrigger: ['onChange', 'onBlur'],
                  rules: [
                    {
                      required: true,
                      whitespace: true,
                      message: "请输入参数名称",
                    },
                  ],
                })(<Input placeholder="请输入" style={{ width: '100%' }} />)}
            </Form.Item>
          </Col>
          <Col span={3} style={{ display: "flex" }}>
            <Form.Item
              label={index === 0 ? '状态' : ''}
              required={false}
            >
              {getFieldDecorator(`names[${k}].status`, {
                valuePropName: 'checked',
                validateTrigger: ['onChange', 'onBlur']
              })(<Switch checkedChildren="显示" unCheckedChildren="隐藏" />)}
            </Form.Item>
            <div style={index === 0 ? { paddingTop: "15px", margin: "auto" } : { paddingBottom: "20px", margin: "auto" }}>
              <Icon
                className="dynamic-delete-button"
                type="minus-circle-o"
                onClick={() => this.remove(k)}
              />
            </div>
          </Col>
        </Row>

      </div>
    ));

1、回显的时候是直接赋值给这个数组names，但是要注意同时赋值一下keys，代表的是列表个数的回显，如果没有赋值则会报上面的那个错误！！！！
2、还有就是回显的时候对应的names数组里面的属性只给表单参数里面需要的，多余的不要加进去，不然也会报上面的错误。

回显关键代码

this.props.form.setFieldsValue({
          keys: res.IotDevParams ? res.IotDevParams.map((item, index) => { return index }) : []    // 表单的长度
        });
  setTimeout(()=>{
          this.props.form.setFieldsValue({names: res.IotDevParams ? res.IotDevParams.map(item => { 
            return { name: item.Name, desc: item.Desc, unit: item.Unit, status: item.Status==1 } }) : []}) 
      },0)