一、首先先看正确的回显方法:
使用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()的执行时机在组件挂载之后,所以不能及时将更新后的值进行渲染