如何通过props设置Ant Design Form表单初始值，赋值不生效该如何解决？

问题原因 #

1. initialValues 赋值语法错误
   你给name、email字段赋值时多套了一层对象：name:{name}，相当于把name字段的值设为了{name: "你传入的名字"}的对象，而不是字符串类型的名字，和表单项期望的值类型不匹配。
2. 手动给表单控件绑定value属性，和AntD Form的受控逻辑冲突
   AntD Form 会通过Form.Item的name属性自动管控内部表单控件的值，你手动给Input加value={name}、甚至给年龄/CNIC的Input写死value='age'、value='cnic'的操作，会覆盖Form的自动赋值逻辑。
3. Email表单项没有使用Input组件
   Email的Form.Item内部你用了<span>{email && email}</span>来展示值，没有用AntD的Input组件，Form无法给非表单控件自动填充初始值。
4. 如果props是异步获取的，initialValues不会自动更新
   initialValues只会在Form组件首次挂载时生效，如果你的name、email是组件挂载后才通过接口拿到传入的，初始挂载时props为空，后续props更新也不会触发Form初始值更新。

修复方案 #

1. 修正initialValues的写法
2. 移除所有表单控件上手动写的value属性，Email项替换为Input组件
3. 如果props是异步传入的，加useEffect监听props变化调用setFieldsValue更新表单值

修正后代码 #

const CreatePatientForm = ({name,email,_id,createProfile}) => {
  const [form] = Form.useForm();
  usePageData(pageData)
  
  // 如果props是异步获取的，保留这段监听更新；如果props是同步传入的可以删掉
  useEffect(() => {
    if(name || email) {
      form.setFieldsValue({
        name: name || '',
        email: email || ''
      })
    }
  }, [name, email, form])

  const onFinish = (values) => {
    console.log('Success:', values);
    const g={cnic:values.cnic,gender:values.gender, age:values.age }
    console.log('Success:', g);
    createProfile(_id,g)
    form.resetFields()
  };
      
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  }; 
                            
  console.log(typeof(name));
              
  return (
    <div>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 16 }}
        {/* 修正initialValues写法 */}
        initialValues={{ name, email, cnic:"", gender:"", age:""}}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item 
          label="Gender" 
          name="gender" 
          wrapperCol={{ offset: 0, span: 10 }}  
          rules={[{ required: true, message: 'Gender is required!' }]}
        >
          <Select placeholder='Please select gender'>
            <Select.Option value="male">male</Select.Option>
            <Select.Option value="female">female</Select.Option>
            <Select.Option value="other">other</Select.Option>
          </Select>
        </Form.Item> 
        <Form.Item
          wrapperCol={{ offset: 0, span: 10 }}
          label="Name"
          name='name'
        >
          {/* 移除手动value属性 */}
          <Input disabled />
        </Form.Item>
        <Form.Item
          wrapperCol={{ offset: 0, span: 10 }}
          label="Email"
          name="email"
        >
          {/* 替换span为Input，移除手动value */}
          <Input disabled />
        </Form.Item>
        <Form.Item
          wrapperCol={{ offset: 0, span: 10 }}
          label="Age"
          name="age"
          rules={[{ required: true, message: 'Age is required!' }]}
        >
          {/* 移除写死的value='age' */}
          <Input maxLength={13} placeholder='Enter Age' />
        </Form.Item>
        <Form.Item
          wrapperCol={{ offset: 0, span: 10 }}
          label="CNIC"
          name="cnic"
          rules={[{ required: true, message: 'CNIC is required!' }]}
        >
          {/* 移除写死的value='cnic' */}
          <Input maxLength={13} placeholder='Enter CNIC' />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 11, span: 10 }}>
          <Button type="primary" htmlType="submit">
            Complete Profile
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}

export default CreatePatientForm

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