Блог

У меня возникли проблемы с доступом к локальному хранилищу в третьем аргументе useReducer как ленивый-начальный, чтобы получить товары корзины покупок из локального хранилища. Кто-нибудь может помочь с этим, пожалуйста? Мне нужно получить доступ к локальному хранилищу, чтобы корзина покупок «MedicineToBuy» оставалась прежней после перезагрузки страницы.

 import React, { useState, createContext, useReducer, useEffect } from 'react' import { cartReducer } from 'reducers/CartReducers'  export const CartStates = createContext()  export const CartProvider = props =gt; {    const [cartVisibile, setCartVisible] = useState(false)  const [medicineToBuy, dispatch] = useReducer(cartReducer, [],function(){  const storageData = localStorage.getItem('Cart');  return storageData ? JSON.parse(storageData) : [];  })   useEffect( () =gt; {  localStorage.setItem('Cart', JSON.stringify(medicineToBuy))  }, [medicineToBuy] )   const value = {  visibility: [cartVisibile, setCartVisible],  itemsInCart: [medicineToBuy],  dispatch: dispatch,  }   return lt;CartStates.Provider value={value}gt;{props.children}lt;/CartStates.Providergt; }  

Ваш компонент, скорее всего, отображается на стороне сервера, где окно недоступно, поэтому нельзя использовать локальное хранилище или любые другие API браузера.

Вы можете проверить, определено ли окно, прежде чем использовать локальное хранилище:

 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';  

Важно: это будет работать только тогда, когда код выполняется на стороне клиента.