修复Next.js中window is not defined方法详解【Js面试】

目录

• 引言
• 使用useEffect钩子
• 检查窗口是否被定义

function updateLastSeen() {
    const lastSeen = window.localStorage.getItem("last-seen") ?? new Date();
    window.localStorage.setItem("last-seen", new Date().toString());
    return lastSeen;
}
function WindowPage() {
    const lastSeen = updateLastSeen();
    return 
Last Seen: {lastSeen}
;
}

function useLastSeen() {
    const [lastSeen, setLastSeen] = useState(null);
    const retrieved = useRef(false); //To get around strict mode running the hook twice
    useEffect(() => {
        if (retrieved.current) return;
        retrieved.current = true;
        setLastSeen(updateLastSeen());
    }, []);
    return lastSeen;
}

function WindowPage() {
    const lastSeen = useLastSeen();
    return (
        

            Last Seen: {lastSeen}
        
    );
}

const isBrowser = () => typeof window !== "undefined"; //The approach recommended by Next.js
function WindowPage() {
    const [lastClick, setLastClick] = useState("");
    if (isBrowser()) { //Only add the event listener client-side
        window.addEventListener("click", (e) =>
            setLastClick(`${e.pageX}, ${e.pageY}`)
        );
    }
    return (
        

            Click at: {lastClick}
        
    );
}