Reactjs 在构建时使用Cookie钩子断开

我正在使用自定义挂钩设置、编辑和删除盖茨比网站上的cookie：

使用cookie.ts

import { useState } from 'react';

const getItem = (key: string) => {
  if (typeof document !== undefined) {
    document.cookie.split('; ').reduce((total, currentCookie) => {
      const item = currentCookie.split('=');
      const storedKey = item[0];
      const storedValue = item[1];

      return key === storedKey ? decodeURIComponent(storedValue) : total;
    }, '');
  }
};

const setItem = (key: string, value: string | boolean, numberOfDays: number) => {
  const now = new Date();

  now.setTime(now.getTime() + numberOfDays * 60 * 60 * 24 * 1000);

  if (typeof document !== undefined) {
    document.cookie = `${key}=${value}; expires=${now.toUTCString()}; path=/`;
  }
};

export const useCookie = (key: string, defaultValue: string | boolean | any) => {
  const getCookie = () => (getItem(key), defaultValue);
  const [cookie, setCookie] = useState(getCookie());

  const updateCookie = (value: string, numberOfDays: number) => {
    setCookie(value);
    setItem(key, value, numberOfDays);
  };

  return [cookie, updateCookie];
};

我在这样的组件中使用它：

const [initialCookieValue, updateCookieValue] = useCookie('cookie', false);

然而，尽管使用

if（typeof document！==undefined）

检查了对

文档的所有引用，但我的网站仍然在使用
webpackeror:ReferenceError:document未定义时中断。我不知道我做错了什么，也不知道如何去修复它，但我知道如果我去掉挂钩，错误就会消失

有什么想法吗？
检查未定义为字符串，
“未定义”

  if (typeof document !== 'undefined')

应用于您的代码：

import { useState } from 'react';

const getItem = (key: string) => {
  if (typeof document !== 'undefined') {
    document.cookie.split('; ').reduce((total, currentCookie) => {
      const item = currentCookie.split('=');
      const storedKey = item[0];
      const storedValue = item[1];

      return key === storedKey ? decodeURIComponent(storedValue) : total;
    }, '');
  }
};

const setItem = (key: string, value: string | boolean, numberOfDays: number) => {
  const now = new Date();

  now.setTime(now.getTime() + numberOfDays * 60 * 60 * 24 * 1000);

  if (typeof document !== 'undefined') {
    document.cookie = `${key}=${value}; expires=${now.toUTCString()}; path=/`;
  }
};

export const useCookie = (key: string, defaultValue: string | boolean | any) => {
  const getCookie = () => (getItem(key), defaultValue);
  const [cookie, setCookie] = useState(getCookie());

  const updateCookie = (value: string, numberOfDays: number) => {
    setCookie(value);
    setItem(key, value, numberOfDays);
  };

  return [cookie, updateCookie];
};

选中未定义为字符串，
“未定义”

  if (typeof document !== 'undefined')

应用于您的代码：

import { useState } from 'react';

const getItem = (key: string) => {
  if (typeof document !== 'undefined') {
    document.cookie.split('; ').reduce((total, currentCookie) => {
      const item = currentCookie.split('=');
      const storedKey = item[0];
      const storedValue = item[1];

      return key === storedKey ? decodeURIComponent(storedValue) : total;
    }, '');
  }
};

const setItem = (key: string, value: string | boolean, numberOfDays: number) => {
  const now = new Date();

  now.setTime(now.getTime() + numberOfDays * 60 * 60 * 24 * 1000);

  if (typeof document !== 'undefined') {
    document.cookie = `${key}=${value}; expires=${now.toUTCString()}; path=/`;
  }
};

export const useCookie = (key: string, defaultValue: string | boolean | any) => {
  const getCookie = () => (getItem(key), defaultValue);
  const [cookie, setCookie] = useState(getCookie());

  const updateCookie = (value: string, numberOfDays: number) => {
    setCookie(value);
    setItem(key, value, numberOfDays);
  };

  return [cookie, updateCookie];
};