javascript - LocalStorage 在 NEXT.js 的第一个渲染中是空的

Question

我用 NextJS 创建了一个购物车并且它工作正常，但是当我尝试控制台记录我的购物车的长度时，在第一个渲染中它看起来是空的，所以它给我带来了很多问题。

    const initialState = {};
  const [cart, setCart] = useState(initialState);

  useEffect(() => {
    const cartData = JSON.parse(localStorage.getItem("cart"));
    if (cartData) {
      setCart(cartData);
    }
  }, []);  

  useEffect(() => {
      localStorage.setItem("cart", JSON.stringify(cart));

  }, [cart]);

所有购物车方法(如 DeleteCart、AddToCart 等)都可以正常工作。 有什么想法吗？

Answer 1

您“几乎”循环了这两个 useEffect。试试这个:

  const initialState = {};
  const [cart, setCart] = useState(initialState);

  useEffect(() => {
    const cartData = JSON.parse(localStorage.getItem("cart"));
    if (cartData) {
      setCart(cartData);
    }
  }, []);  

  useEffect(() => {
      if(Object.keys(cart).length > 0){
          localStorage.setItem("cart", JSON.stringify(cart));
      {
  }, [cart]);