问题:
在antd的form表单的api里面有个"initialValues"可以设置默认值.但是表单没有更新
<Form name="test" form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} initialValues={data} //此处设置"data"为默认值 > <Form.Item name="name" label="姓名" required={true}> <Input.TextArea autoSize={{ minRows: 1, maxRows: 3 }} ></Input.TextArea> </Form.Item> </Form>
但是,正如官网所说
表单默认值,只有初始化以及重置时生效
也就是说比如详情页,data为调结果返回的结果,data本身就有默认值,然后接口返回之后更新data值.那么其结果是页面没有更新,详情页form表单在页面上还是空.为啥?
因为"initialValues"只是初始化,所以它只设置了data的原始默认值,而调接口之后虽然data更新了,但是"initialValues"并不会更新.所以表单也不会更新
解决方案:
1.form表单中有另一个api可供选择--setFieldsValue.其功能是更新form表单值.所以,我们只需要监听data值的变化,然后更新form表单值即可.
useEffect(() => { form.setFieldsValue(data) }, [data]);
2.确认data更新之后再渲染页面.
{data? <Form name="dataGroup" form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} initialValues={data} > <Form.Item name="name" label="数据组别" required={true}> <Input.TextArea autoSize={{ minRows: 1, maxRows: 3 }} ></Input.TextArea> </Form.Item> </Form>:null}
第一次页面并没有渲染东西,但是只要data变化了,页面就会重新渲染一个默认值是data的表单,form表单也就无需更新.