【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表單也就無需更新.