1. 程式人生 > 其它 >React 使用Hooks時, Form表單資料回顯問題

React 使用Hooks時, Form表單資料回顯問題

問題描述:React 專案中,使用antd 4.x版本,文章編輯時,拿到了資料,但卻不回顯

 

 

Form表單要回顯資料一般會想到的是initialValues,但是隻有初始化以及重置時生效

<Form
        name="wrap"
        labelCol={{ flex: '70px' }}
        colon={false}
        form={form}
        initialValues={{ title, subTitle }}
        >
        <Form.Item label="標題:" name="title" rules={[{ required: true,message: '請輸入標題!' }]}>
          <Input />
        </Form.Item>
        <Form.Item label="副標題:" name="subTitle">
          <Input />
        </Form.Item>
        <Form.Item>
          <WangEditor content={content} setContent={setContent} />
        </Form.Item>
  </Form>

  

使用Hooks,初始化定義title,subTitle,

使用setTtitle,setSubTitle 設定值

 

useEffect(() => {
    if(params.id) {
      lookArticleApi({id:params.id}).then(res => {
        console.log(res)
        setContent(res.data.content)
        setTitle(res.data.title)
        setSubTitle(res.data.subTitle)

      })
    }
  },[])

 

查詢 antd 發現:

 於是使用form.setFieldsValue來重新獲取值,頁面資料回顯成功

useEffect(() => {
    if(params.id) {
      lookArticleApi({id:params.id}).then(res => {
        console.log(res)
        setContent(res.data.content)
        // setTitle(res.data.title)
        // setSubTitle(res.data.subTitle)
        form.setFieldsValue({
          title: res.data.title,
          subTitle: res.data.subTitle
        })
      })
    }
  },