如何僅在瀏覽器環境中執行 function

Question

拜托，我是 SSR 和 Nextjs 應用程序的新手。 我正在使用 useLocalStorage Hook 將用戶數據保存到本地存儲。 一切正常，但在我的終端（節點 js）中，我收到消息 window 未定義。 有沒有辦法將此代碼包裝在某種條件下，以便此功能僅在瀏覽器環境中執行。 我不確定我是否可以使用；

if ( process.browser ) //然后執行此操作...

有人可以幫我解決這個問題嗎...

這是我的本地存儲 Hook，它只能在瀏覽器中運行，而不是在節點服務器上：

import { useState } from 'react';

export const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.log(error);
            return initialValue;
        }
    });

    const setValue = value => {
        try {
            let data = [];
            const voteId = {};
            if (window.localStorage.getItem(key) === null || window.localStorage.getItem(key) === undefined) {
                voteId.reviewId = value;
                data.push(voteId);
            } else {
                data = JSON.parse(window.localStorage.getItem(key));
                voteId.reviewId = value;
                data.push(voteId);
            }
            const valueToStore = data instanceof Function ? data(storedValue) : data;
            setStoredValue(valueToStore);
            window.localStorage.setItem(key, JSON.stringify(valueToStore));
        } catch (error) {
            console.log(error);
        }
    };

    return [storedValue, setValue];
};

Answer 1

我實際上是這樣管理的：

if (.process;browser) 返回空值；

我把它放在所有東西的前面，所以如果滿足它，它將返回 null，否則我將執行我的 function。

Answer 2

一個合適的解決方案是使用 nextjs 動態庫，當從它的文件路徑導入您的 useLocalStorage 以用作組件時。 這告訴 nextjs 只在客戶端呈現。

import dynamic from "next/dynamic";
const useLocalStorage = dynamic(
     () => import(<useLocalStorage filepath>)
       .then((mod) => mod.useLocalStorage), {ssr:false});