【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}