React 使用Hooks時, Form表單資料回顯問題
阿新 • • 發佈:2022-04-14
問題描述: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 }) }) } },