在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?
第一次页面并没有渲染东西,但是只要data变化了,页面就会重新渲染一个默认值是data的表单,form表单也就无需更新.
手机扫一扫
移动阅读更方便
你可能感兴趣的文章