本人在開發(fā)過程中遇到這樣一個問題癣疟，打算通過useEffect來初始化表單的默認值吠卷，這里使用的是react下的hooks Api,但是textArea的初始值始終無法設置成功：
import React, { useState, useEffect, useRef } from 'react';
// 文本框默認內容
const [textAreaContent, setText] = useState('sdc');
// 使用useEffect初始化表單
useEffect(() => {
async function pageInfo() {
const { data } = await getPageInfo();
const { imgList, text } = JSON.parse(data[0]);
setText(text);
};
pageInfo();
}, []);
// 顯示部分
<Form>
<FormItem label='內容' name={['user', 'pageContent']}>
<TextArea value={textAreaContent} defaultValue={textAreaContent}/>
</FormItem>
</From>
通過排查發(fā)現接口請求沒有問題，使用hooks設置字符串的功能也正常，但就是無法設置textArea的默認值柒莉。甚至直接給TextArea的defaultValue和value寫死字符串都無法生效。官網上有如下解釋：
為什么 Form.Item 下的子組件 defaultValue 不生效沽翔？#
當你為 Form.Item 設置 name 屬性后兢孝，子組件會轉為受控模式。因而 defaultValue 不會生效仅偎。你需要在 Form 上通過 initialValues 設置默認值跨蟹。
相關鏈接。
可以參考官網的建議,或參考class實現下針對antd 表單組件的賦初始值方式：
const { currentUser, form } = this.props;
form.setFieldsValue(obj);
考慮到可能要通過form的setFieldsValue Api才能達到目的橘沥，于是對函數式組件進行改造：
import React, { useState, useEffect, useRef } from 'react';
const formRef = useRef(null);
// 文本框默認內容
const [textAreaContent, setText] = useState('sdc');
// 使用useEffect初始化表單
useEffect(() => {
async function pageInfo() {
const { data } = await getPageInfo();
const { imgList, text } = JSON.parse(data[0]);
formRef.current.setFieldsValue({
user: {
pageContent: text
}
})
setText(text);
};
pageInfo();
}, []);
// 顯示部分
<Form ref={formRef}>
<FormItem label='內容' name={['user', 'pageContent']}>
<TextArea />
</FormItem>
</From>
這里通過useRef來獲取antd form的實例窗轩，然后調用它的setFieldsValue，測試后發(fā)現TextArea初始值賦值成功
