Ant Design Form中setFieldsValue报错及组件间传值方法咨询

看起来你遇到的这个报错很常见，我帮你一步步排查和解决：

报错原因分析 #

你已经用了getFieldDecorator但还是报错，大概率是下面几个原因之一：

1. 字段名不匹配 #

你的setFieldsValue里用的是fname，但要确保这个字段名和getFieldDecorator绑定的字段名完全一致。比如如果你的表单字段是这样写的：

<Form.Item label="用户名">
  {getFieldDecorator('username', {
    rules: [{ required: true, message: '请输入用户名' }]
  })(<Input />)}
</Form.Item>

那你调用setFieldsValue时必须用username而不是fname，否则Form找不到对应的字段，就会抛出那个错误。

2. 组件未被Form.create()包裹 #

只有通过Form.create()高阶组件包装的组件，才能正确获取到form对象里的getFieldDecorator和setFieldsValue方法。如果你的组件没有被包装，即使你在代码里写了const { getFieldDecorator } = this.props.form，这个form对象可能是无效的。

正确的组件导出方式应该是：

class YourFormComponent extends React.Component {
  // ...你的代码
}

export default Form.create()(YourFormComponent);

3. 调用时机过早 #

如果在组件还没完成挂载（比如componentWillMount里）就调用setFieldsValue，这时候表单还没初始化完成，也会触发这个错误。建议在componentDidMount或者用户交互事件（比如你写的handleChange）里调用。

4. 错误调用setFieldsValue方法 #

你代码里写的this.props.setFieldsValue是错误的！setFieldsValue是this.props.form对象下的方法，不是直接挂载在组件props上的，这很可能是你报错的核心原因。

正确使用setFieldsValue的示例 #

结合你的代码片段，修正后的完整示例如下：

import { Form, Row, Col, Input } from 'antd';

class RegisterForm extends React.Component {
  handleChange = (e) => {
    const fieldName = e.target.name;
    const fieldValue = e.target.value;
    // 从当前组件的form props里调用setFieldsValue
    this.props.form.setFieldsValue({ [fieldName]: fieldValue });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Row gutter={4}>
        <Col span={12}>
          <Form.Item label="用户名">
            {/* 这里的name要和setFieldsValue里的字段名一致，input的name也要对应 */}
            {getFieldDecorator('username', {
              rules: [{ required: true, message: '请输入用户名' }]
            })(<Input name="username" onChange={this.handleChange} />)}
          </Form.Item>
        </Col>
      </Row>
    );
  }
}

// 必须用Form.create()包裹组件，才能注入form对象
export default Form.create()(RegisterForm);

组件间通过props传递值并更新表单的方法 #

如果需要在组件间传递值并同步到表单，可以分两种场景处理：

1. 父组件向子表单组件传值并初始化表单 #

父组件

class ParentComponent extends React.Component {
  state = {
    defaultUsername: '默认测试用户名'
  };

  render() {
    return (
      <div>
        <RegisterForm initialUsername={this.state.defaultUsername} />
      </div>
    );
  }
}

子表单组件

class RegisterForm extends React.Component {
  componentDidMount() {
    // 组件挂载后，用父组件传过来的值初始化表单字段
    const { initialUsername, form } = this.props;
    form.setFieldsValue({ username: initialUsername });
  }

  // ...其他代码

}

export default Form.create()(RegisterForm);

2. 子表单组件向父组件传递表单值 #

父组件

class ParentComponent extends React.Component {
  handleFormValueChange = (fieldName, fieldValue) => {
    console.log('子表单传来的更新值：', fieldName, fieldValue);
    // 这里可以处理父组件的业务逻辑，比如更新父组件状态
  };

  render() {
    return (
      <div>
        <RegisterForm onValueChange={this.handleFormValueChange} />
      </div>
    );
  }
}

子表单组件

class RegisterForm extends React.Component {
  handleChange = (e) => {
    const fieldName = e.target.name;
    const fieldValue = e.target.value;
    const { form, onValueChange } = this.props;
    // 更新当前表单字段
    form.setFieldsValue({ [fieldName]: fieldValue });
    // 调用父组件的回调方法，传递最新值
    onValueChange(fieldName, fieldValue);
  };

  // ...其他代码

}

export default Form.create()(RegisterForm);

总结 #

1. 确保setFieldsValue的字段名和getFieldDecorator的name完全一致；
2. 组件必须被Form.create()包裹，才能获取到有效的form对象；
3. setFieldsValue是this.props.form下的方法，不要直接从this.props里取；
4. 组件间传值通过props实现：父传子直接传属性，子传父通过回调方法。

内容的提问来源于stack exchange，提问作者Shibu