React 中使用 onload 的欢迎加载器问题

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

一旦您添加了一个事件侦听器，就会调用加载事件，因此打开一个新选项卡时，您的加载事件将被调用，但您的刷新加载事件不会被调用，因此 setLoaderHandle 也不会被调用。

您可以在 useEffect 中调用 setLoaderHandle 以确保在每个组件挂载时都调用它。

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

React 中使用 onload 的欢迎加载器问题

Welcome loader issue in React using onload

javascript

reactjs

react-hooks

use-state