如何将对象的全局状态数组放入本地存储？

Question

我在电子商务网站上工作。我使用 react-hooks-global-state（下面的链接）中的库创建了一个全局状态。我希望在刷新或重定向页面时保存数组。但是，当我将它存储在本地存储中时，我得到了一个无限循环。

图书馆：https://github.com/dai-shi/react-hooks-global-state

____

我试过这个方法，使用效果，现在把数组放到本地存储是可以的，但是取出来会死循环：

状态：

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

const { setGlobalState, useGlobalState } = createGlobalState({
  cartItems: [],
});
export { useGlobalState, setGlobalState };

代码：

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

useEffect(() => {
    const data = window.localStorage.getItem("literalcartting");
    if (data !== null) {
      setGlobalState("cartItems", JSON.parse(data));
    }
  });
  useEffect(() => {
    window.localStorage.setItem(
      "literalcartting",
      JSON.stringify(cartItemslit)
    );
  }, cartItemslit);

Answer 1

你的代码有无限渲染的问题，两个

useEffect

钩子都没有依赖数组，

试试这个代码，

const [list, setCartItems] = useGlobalState("cartItems");

useEffect(() => {
  const data = window.localStorage.getItem("literalcartting");
  if (data !== null) {
    setCartItems(JSON.parse(data));
  }
}, []);

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

在第一个

useEffect

中，我添加了一个空的依赖数组

[]

，这样这个

useEffect

钩子只被渲染一次。

在第二个中，我添加了

[list]

作为依赖数组，所以这个

useEffect

钩子只在

list

有一些变化时才有效。

编辑 - 在 localStorage 中保存数据

在两个钩子之后添加这个useEffect钩子，

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

Answer 2

这是到目前为止的一切：

const [list, setCartItems] = useGlobalState("cartItems");

  useEffect(() => {
    const data = window.localStorage.getItem("literalcartting");
    if (data !== null) {
      setCartItems(JSON.parse(data));
    }
  }, []);

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

  const onAdd = (product) => {
    document.getElementById("sidebar").style.width = "420px";
    document.getElementById("main").style.filter = "blur(10px)";
    const exist = list.find((x) => x.id === product.id);
    if (exist) {
      setGlobalState(
        "cartItems",
        list.map((x) =>
          x.id === product.id ? { ...exist, qty: exist.qty + 1 } : x
        )
      );
    
    } else {
      setGlobalState("cartItems", [...list, { ...product, qty: 1 }]);
    }
  };
  const onRemove = (product) => {
    const exist = list.find((x) => x.id === product.id);
    if (exist.qty === 1) {
      setGlobalState(
        "cartItems",
        list.filter((x) => x.id !== product.id)
      );
    } else {
      setGlobalState(
        "cartItems",
        list.map((x) =>
          x.id === product.id ? { ...exist, qty: exist.qty - 1 } : x
        )
      );

无限循环消失了，但是当我刷新时仍然没有保存状态。我检查了本地存储，确实保存的数组在我刷新页面时被清除了。任何修复？
非常感谢你的帮助+我想我可以在我改变数组的地方添加函数。