如何仅在浏览器环境中执行功能答案

【问题标题】：How to execute function only in browser environment如何仅在浏览器环境中执行功能
【发布时间】：2020-07-28 08:53:48
【问题描述】：

拜托，我是 SSR 和 Nextjs 应用程序的新手。我正在使用 useLocalStorage Hook 将用户数据保存到本地存储。一切正常，但在我的终端（节点 js）中，我得到消息窗口未定义。有没有办法将此代码包装在某种条件下，以便此功能仅在浏览器环境中执行。我不确定我是否可以使用；

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];
};

【问题讨论】：

也许这对你有帮助 stackoverflow.com/questions/51473031/… github.com/mdn/webextensions-examples/issues/194
不，我相信这不是同一个问题，但还是谢谢
嗨@Pokreniseweb，if ( process.browser ) 应该可以满足您的需求。您还有其他问题吗？

标签： javascript node.js next.js server-side-rendering

【解决方案1】：

一个合适的解决方案是使用 nextjs 动态库，当从它的文件路径导入你的 useLocalStorage 以用作组件时。这告诉 nextjs 只在客户端渲染。

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

【讨论】：

【解决方案2】：

我实际上是这样管理的：

如果 (!process.browser) 返回 null;

我把它放在所有东西的前面，所以如果满足它返回null，否则我将执行我的函数。

【讨论】：