【antd】form表单默认值设置

问题:

在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表单也就无需更新.