localstorage 没有在 Next js 中定义在 useReducer 中使用

Question

我在 useReducer 的第三个参数中访问 localstorage 作为延迟初始值以从 localstorage 获取购物车项目时遇到问题。有人可以帮忙吗？我需要访问本地存储，以便 'MedicineToBuy' 的购物车在页面重新加载后保持不变。

import React, { useState, createContext, useReducer, useEffect } from 'react'
import { cartReducer } from 'reducers/CartReducers'

export const CartStates = createContext()

export const CartProvider = props => {
  
  const [cartVisibile, setCartVisible] = useState(false)
  const [medicineToBuy, dispatch] = useReducer(cartReducer, [],function(){
    const storageData = localStorage.getItem('Cart');
    return storageData ? JSON.parse(storageData) : [];
  })

  useEffect( () => {
    localStorage.setItem('Cart', JSON.stringify(medicineToBuy))
  }, [medicineToBuy] )

  const value = {
    visibility: [cartVisibile, setCartVisible],
    itemsInCart: [medicineToBuy],
    dispatch: dispatch,
  }

  return <CartStates.Provider value={value}>{props.children}</CartStates.Provider>
}

Answer 1

您的组件很可能是在 window 不可用的服务器端呈现的，因此无法使用本地存储或任何其他浏览器 API。

您可以在使用本地存储之前检查是否定义了 window:

  const [medicineToBuy, dispatch] = useReducer(cartReducer, [],function(){
    const storageData = typeof window !== 'undefined' ? localStorage.getItem('Cart') : null;
    return storageData ? JSON.parse(storageData) : [];
  })

您可以将其提取到一个可重复使用的变量中，并在需要访问浏览器的任何地方使用它 API:

export const IS_CLIENT = typeof window !== 'undeinfed';

重要提示：这仅在代码运行时有效客户端。

localstorage 没有在 Next js 中定义在 useReducer 中使用

localstorage is not defined in Next js to use in useReducer

local-storage

reactjs

next.js

use-reducer