1. 程式人生 > 其它 >2020/09/17 this.formRef.current.setFieldsValue為null(注意是非同步操作)

2020/09/17 this.formRef.current.setFieldsValue為null(注意是非同步操作)

2020/09/17

近些天來我一直有個關於this.formRef.current.setFieldsValue為null的問題沒有得到解決,直至我上網百度一下方知閉門造車是如此的苦逼。
造成他為null,在初始化了formRef=React.createRef()以及form表單內插入資料接收器ref={this.formRef}和能夠獲取到資料來源並且排除不是寫錯單詞的前提下,呼叫this.formRef.current.setFieldsValue來設定form表單的值沒有問題的;
但是,需要注意的是,form表單沒有被渲染的話,裡面是沒有值的,所以不管業務怎麼寫,關鍵還得加上form表單已經渲染的這個前提;
而我遇到的業務則是:點選按鈕,載入對應的form表單資料,而沒有點選時它是沒有被渲染的,當你套上個定時器:setTimeout(() => { this.formRef.current.setFieldsValue({ 業務 }) }, 任意時間 ),就可以在點選的時候渲染form表單了。

2020/09/18

除了套定時器之外還可以寫成非同步載入,如在點選事件前加個async,設定值的地方再寫個await,具體如下:
showModal = async (ev, record, d) => {
await setState({
modalVisible: true,
modifyModalData: record,
modalTitle: "編輯",
}); // setState接收資料,async和await是組合使用的。
this.formRef.current.setFieldsValue({ 業務 }, 100) // 這裡設定form表單的值
}
但是,這方法有時候又不靈,具體原因我還沒找到,而用定時器setTimeout(() => () {})就沒問題。