在 Next js 中未定义 localstorage 以在 useReducer 中使用答案

【问题标题】：localstorage is not defined in Next js to use in useReducer在 Next js 中未定义 localstorage 以在 useReducer 中使用
【发布时间】：2022-01-11 20:48:34
【问题描述】：

我在访问 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>
}

【问题讨论】：

标签： reactjs next.js local-storage use-reducer

【解决方案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';

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

【讨论】：

非常感谢。您的回答完美解决了问题。