javascript - 使用 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 />}
           </>
        )
}

标签： javascriptreactjsreact-hooksuse-state

Answer 1

因为一旦你添加了一个事件监听器就会调用加载事件，所以打开一个新选项卡你的加载事件将被调用，但是你的刷新加载事件不会被调用，所以setLoaderHandle 也不会被调用。

您可以调用setLoaderHandle内部的 useEffect 以确保在每个组件挂载上都调用它。

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