2 回答

TA貢獻1839條經驗 獲得超15個贊
簡而言之,這是由于使用了錯誤的調用及其依賴項引起的。由于表單中邏輯的每個部分都需要單獨處理,因此您將需要多種效果,如下所示:useEffect
首先,如果要在用戶狀態更改時(從注銷到登錄)獲取配置文件,則需要在用戶登錄時運行效果。getCurrentProfile
useEffect(() => {
// User has been logged in
if (loggedIn) getCurrentProfile();
}, [loggedIn]);
然后,您需要另一個效果來偵聽更改,當用戶的配置文件已成功提取時,從上面開始,以按預期填充表單字段:profile
useEffect(() => {
setFormData({
... // see as above
});
}, [profile]);
最后,對于基于已完成字段的模式,我建議使用另一個來檢查這些數據(正如我預測的那樣,這可能是您的表單數據):setShowuseEffectuser
useEffect(() => {
let completeFieldsCounter = 0;
if (user) {
... // see snippets above
}
if(completeFieldsCounter == 9 ){
setShow(false)
} else {
setShow(true)
}
}, [user]);

TA貢獻1785條經驗 獲得超4個贊
我以前遇到過同樣的問題。我認為在函數末尾放入數組的內容存在問題。但很難從給出的東西中精確地分辨出來。useEffect
首先,它只顯示 Redux ,因此請檢查有關您的登錄/退出案例的信息。那是因為你放入數組,這意味著只要你的狀態發生變化,它就會觸發,所以也許你的狀態不穩定,或者它有問題。這可能是您長時間加載(一遍又一遍地運行)的原因之一。- 如果您出于某些原因故意將加載放在那里。actions
reducers
loading
useEffect
useEffect
loading
loading
useEffect
接下來,嘗試從數組中刪除并僅放入數組內部(不是作為函數,而是像我所寫的那樣)。loading
getCurrentProfile
useEffect(() => { getCurrentProfile(); }, [getCurrentProfile])
這意味著除非調用 =使用一次,否則不會觸發 useEffect。getCurrentProfile
如果使用此優化,請確保數組包含組件作用域中隨時間變化并由效果使用的所有值(如 props 和狀態)。否則,您的代碼將引用以前呈現的陳舊值。詳細了解如何處理函數以及當數組更改過于頻繁時該怎么辦。
如果要運行效果并僅清理一次(在裝載和卸載時),則可以傳遞一個空數組 ([]) 作為第二個參數。這告訴 React,你的效果不依賴于道具或狀態的任何值,所以它永遠不需要重新運行。這不是一種特殊情況 - 它直接遵循依賴項數組始終的工作方式。
如果傳遞一個空數組 ([]),則效果內的 props 和狀態將始終具有其初始值。雖然將 [] 作為第二個參數傳遞更接近于熟悉的組件DidMount 和組件將卸載心智模型,但通常有更好的解決方案來避免過于頻繁地重新運行效果。另外,不要忘記 React 推遲運行使用效果,直到瀏覽器繪制完畢,所以做額外的工作不是一個問題。
我們建議使用窮舉 deps 規則作為我們的 eslint 插件-反應-鉤子包的一部分。當依賴項指定不正確時,它會發出警告,并建議修復。
祝您的項目好運,祝您編碼愉快!
添加回答
舉報