javascript - 如何仅在浏览器环境中执行功能

问题描述

拜托，我是 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];
};

标签： javascriptnode.jsnext.jsserver-side-rendering

javascript - 如何仅在浏览器环境中执行功能

问题描述

解决方案

推荐阅读