antd Hook 表单回显避坑

一、首先先看正确的回显方法：

使用form.setFieldsValue（{name:value}）回显

1.将form实例与表单绑定，获取表单Dom

 <Form
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 1100, width: '1000px' }}
        // initialValues={}
        autoComplete="off"
        form={form}
      >

const [form] = Form.useForm();

2.修改表单字段的值 

  form.setFieldsValue({
       name:value
      });

二、避坑

避坑1：使用initialValues

const [iniForm, setInitForm] = useState({apiDesc: ''});

开始我尝试使用initialValues={initForm}（iniForm为useState()声明的状态）然后在组件挂载时监听并修改InitForm，最后无法实现。原因在于使用 useState() 这个 Hook 声明的 setInitForm 函数是异步的并且在组件挂载之后执行。所以无法更新表单的值。用官方的解释是 initialValues只能绑定同步值不能绑定异步值。

 避坑2：每一个字段都绑定value，使用useState()修改value，让组件重新渲染

因为使用useState()修改值后会使组件重新渲染，所以尝试使用此方法，但是仍然无效。原因同上，就是useState()的执行时机在组件挂载之后，所以不能及时将更新后的值进行渲染