Как выполнить функцию только в браузерной среде - PullRequest
0 голосов
/ 15 апреля 2020

Пожалуйста, я новичок в приложениях SSR и Next js. Я использую крючок useLocalStorage для сохранения пользовательских данных в локальном хранилище. Все работает нормально, но в моем терминале (node js) я получаю окно сообщения не определено. Есть ли способ обернуть этот код в какое-то условие, чтобы эта функция выполнялась только в среде браузера. Я не уверен, что могу использовать;

if (process.browser) // затем сделать это ...

Может кто-нибудь помочь мне, как решить эту проблему ...

Это мой хук локального хранилища, который должен работать только в браузере, а не на сервере узла:

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

1 Ответ

1 голос
/ 15 апреля 2020

Я действительно управляю этим следующим образом:

Если (! Process.browser) возвращает ноль;

Я ставлю это перед всем, поэтому, если это выполнено, оно возвращает ноль, если не буду выполнять свою функцию.

...