如何将react-hooks-global-state全局对象数组存入localStorage并解决无限循环

你的无限循环根源很明确：第一个useEffect没加依赖数组，导致每次组件渲染都会执行它。流程是这样的：读取localStorage后调用setGlobalState更新cartItems → cartItemslit状态变化触发第二个useEffect把数据存回localStorage → 组件重新渲染 → 第一个useEffect再次执行，循环往复停不下来。

给你两种可行的解决办法：

方案一：修正组件内的useEffect依赖 #

把第一个useEffect的依赖数组设为空，让它只在组件首次挂载时执行一次读取操作，代码修改如下：

const [cartItemslit] = useGlobalState("cartItems");

// 仅在组件挂载时读取localStorage，避免重复执行
useEffect(() => {
  const data = window.localStorage.getItem("literalcartting");
  if (data !== null) {
    setGlobalState("cartItems", JSON.parse(data));
  }
}, []); // 空依赖数组，确保只执行一次

useEffect(() => {
  window.localStorage.setItem(
    "literalcartting",
    JSON.stringify(cartItemslit)
  );
}, [cartItemslit]);

方案二：全局状态初始化时直接读取localStorage（更推荐） #

把读取localStorage的逻辑移到全局状态创建阶段，这样所有组件使用状态时直接拿到持久化后的数据，不用每个组件单独处理读取逻辑：

import { createGlobalState } from "react-hooks-global-state";

// 初始化时优先从localStorage取数据，没有则用空数组
const initialCartItems = JSON.parse(window.localStorage.getItem("literalcartting")) || [];

const { setGlobalState, useGlobalState } = createGlobalState({
  cartItems: initialCartItems,
});

// 封装自动同步localStorage的方法，统一管理
export const useSyncCartToLocalStorage = () => {
  const [cartItems] = useGlobalState("cartItems");
  useEffect(() => {
    window.localStorage.setItem("literalcartting", JSON.stringify(cartItems));
  }, [cartItems]);
};

export { useGlobalState, setGlobalState };

之后在需要的组件里调用useSyncCartToLocalStorage即可，甚至可以进一步封装updateCartItems方法，让每次更新状态时自动同步到localStorage：

export const updateCartItems = (newItems) => {
  setGlobalState("cartItems", newItems);
  window.localStorage.setItem("literalcartting", JSON.stringify(newItems));
};

内容的提问来源于stack exchange，提问作者user21159731