使用 onload 的 React 中的歡迎加載程序問題

Question

我正在用 React 實現歡迎加載器。 第一次加載頁面時它工作正常。 但是當我再次刷新頁面時，加載程序並沒有消失。 這是代碼->

function App(){

        const [isLoader, setIsLoader] = useState(false);


        useEffect(() => {
            setIsLoader(true);
            window.addEventListener("load", setLoaderHandle);
            return () => {
                window.removeEventListener("load", setLoaderHandle);
            }

        }, []);


        const setLoaderHandle = () => {
            const time = setTimeout(() => setIsLoader(false), 1300);
        }


        return (
           <> 
              {isLoader && <Loader />}
           </>
        )
}

Answer 1

因為一旦你添加了一個事件偵聽器，就會調用 Load Event，所以打開一個新選項卡，你的 load 事件將被調用，但是你的刷新加載事件不會被調用，所以setLoaderHandle也不會被調用。

您可以在setLoaderHandle中調用 setLoaderHandle 以確保在每個組件安裝時調用它。

useEffect(() => {
    setIsLoader(true);
    window.addEventListener("load", setLoaderHandle);
    setLoaderHandle();
    return () => {
      window.removeEventListener("load", setLoaderHandle);
    };
  }, []);