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

喜欢ヅ旅行 2023-03-06 05:36 39阅读 0赞

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

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

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

这种是我在使用ant表单实现这个效果时候回显遇到的问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70]  
**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)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MjQxOTM0_size_16_color_FFFFFF_t_70]: /images/20230208/6e68c4243f8d4c9a9306374ff865d24c.png

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 java Cannot make a static reference to the non-static field s1

相关 ElasticSearch script查询报错A document doesn‘t have a value for a field! Use doc[＜field＞].size()==0

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

相关点击按钮弹出modal模态框,出现You cannot set a form field before rendering a field associated with the value.....

相关 You cannot set a form field before rendering a field associated with the value

相关【hql】A different object with the same identifier value was already associated with the session

相关 Error 500: a different object with the same identifier value was already associated with the session

相关解决a different object with the same identifier value was already associated with the session错误

相关 Field 'id' doesn't have a default value 原因

相关 a different object with the same identifier value was already associated with the session