React Hooks依賴項數組中使用antd中的form導致頁面陷入死循環

最近在逐漸將函數寫法從class組建從函數組件轉變,在開發的過程中遇到了一個表單中的小問題,這裏記錄一下:

場景:頁面有兩個下拉框,有聯動關係,第二個下拉框需要根據第一個下拉框的值發生變化,所以在第一個下拉框的onChange的回調函數中完成數據獲取之後,需要調用form.setFieldsValue將第二個下拉框中的值更新掉,但是hooks插件會提示你缺少了一個form依賴項,當把form依賴項添加到依賴數組中之後,頁面就會陷入死循環中,因爲函數中對form表單的某一項做了賦值操作,而依賴項中有form,這樣就造成了無限循環。但是如果不填的話又感覺不太好,總想找一個辦法來解決這個問題。

一種暴力的解決方法就是直接使用vscode的提示,在對應行上面加一行eslint註釋,使得頁面不提示缺少了依賴項

我這邊找到的另外一種解決方法是把setFieldsValue這個函數作爲依賴項傳入到依賴數組中,而不是把form傳入進去,從github上有關的問題來看也推薦使用這種辦法來解決這個問題,form作爲依賴項傳入進去是一定會出問題的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章