如何在下一个 js 中设置和使用本地存储

Question

谁能帮我解决 Next JS 和 localstorage 的问题。我正在构建一个电子商务应用程序，当用户将商品放入购物篮时，我希望能够将其保存到本地存储中。我当前的实现不起作用，我收到一条错误消息，提示“无法读取未定义的属性 'basket'”。下面是我的代码 sn-p。

export const StateProvider = ({ children }) => {
  const initialState = () => {
    if (typeof window !== 'undefined') {
      return {
        basket:
          window.localStorage.getItem('basket') === null
            ? []
            : window.localStorage.getItem('basket'),
        viwedItems: [],
        saved: [],
      };
    }
  };

  const [state, dispatch] = useReducer(productReducer, initialState());
  const [durationNotification, setDurationNotification] = useState(true);
  const [showMiniBasket, setMiniBasket] = useState(false);

  useEffect(() => {
    window.localStorage.setItem('basket', state.basket);
  }, [state.basket]);

Answer 1

出现问题是因为state在服务器上运行时是undefined，所以在useEffect的依赖数组[state.basket]上设置值时会抛出错误。

有几种方法可以解决这个问题，但其中之一是如果typeof window !== 'undefined' 是false，则从initialState 返回一个空对象。

export const StateProvider = ({ children }) => {
    const initialState = () => {
        if (typeof window !== 'undefined') {
            return {
                basket:
                window.localStorage.getItem('basket') === null
                    ? []
                    : window.localStorage.getItem('basket'),
                viwedItems: [],
                saved: [],
            };
        }
        return {
            basket: [],
            viewedItems: [],
            saved: []
        }; // Add this so `state` is not undefined on the server-side
    };

    const [state, dispatch] = useReducer(productReducer, initialState());

    useEffect(() => {
        window.localStorage.setItem('basket', state.basket);
    }, [state.basket]); // Accessing `state.basket` will no longer throw an error
    //...
}