記一次react hooks的坑!!!


直接上一段代碼

1  React.useEffect(()=>{
2       if(!show){
3          return null;
4       }
5    },[]);

我們在都知道在hooks組件卸載的時候需要傳遞一個函數,卸載時候會執行這個狀態,

上面的代碼我們本意是想在!show時候就返回,不繼續執行了,但是react框架在編譯時候錯誤把null當成func進行解析了,

但是他又不符合react返回函數的機制,導致我們這里出現了問題,最終導致我們頁面白屏,

白屏后我一開始以為接口問題,緊接着webapck配置的問題,就去測試環境改配置,后來以為router跳轉問題,最后以為tsconfig配置問題,反正所有都改了一遍沒有效果,

最后惡心了好幾天解決了問題

正確的寫法如下,我們直接return就行了

1  React.useEffect(()=>{
2       if(!show){
3          return;
4       }
5    },[]);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM