最近在逐漸將函數寫法從class組建從函數組件轉變,在開發的過程中遇到了一個表單中的小問題,這裏記錄一下:
場景:頁面有兩個下拉框,有聯動關係,第二個下拉框需要根據第一個下拉框的值發生變化,所以在第一個下拉框的onChange的回調函數中完成數據獲取之後,需要調用form.setFieldsValue將第二個下拉框中的值更新掉,但是hooks插件會提示你缺少了一個form依賴項,當把form依賴項添加到依賴數組中之後,頁面就會陷入死循環中,因爲函數中對form表單的某一項做了賦值操作,而依賴項中有form,這樣就造成了無限循環。但是如果不填的話又感覺不太好,總想找一個辦法來解決這個問題。
一種暴力的解決方法就是直接使用vscode的提示,在對應行上面加一行eslint註釋,使得頁面不提示缺少了依賴項
我這邊找到的另外一種解決方法是把setFieldsValue這個函數作爲依賴項傳入到依賴數組中,而不是把form傳入進去,從github上有關的問題來看也推薦使用這種辦法來解決這個問題,form作爲依賴項傳入進去是一定會出問題的。