代码之家 › 专栏 › 技术社区 › Dom

useEffect在React中第一次装载时返回空数组

reactjs

Dom · 技术社区 · 2 年前

context/cart.jsx

import { useState, useContext, createContext, useEffect } from "react";

const CartContext = createContext()

const CartProvider = ({ children }) => {
    const [cart, setCart] = useState([])
    const existingCartItems = localStorage.getItem("cart");
    console.log(existingCartItems)

    useEffect(() => {
        setCart(JSON.parse(existingCartItems));
    }, [existingCartItems])

    console.log(cart)

    return (
        <CartContext.Provider value={[cart, setCart]}>
            {children}
        </CartContext.Provider>
    )
}

const useCart = () => useContext(CartContext)

export { useCart, CartProvider }

pages/CartPage.jsx

const CartPage = () => {
    const [cart, setCart] = useCart() <-- The value returning an empty array on first mount
}

我试图用本地存储值而不是空数组来装载cart的值。是什么原因 cart 在其他组件页上返回一个空数组,即使我已经使用过 useEffect 以设置该值。如何拥有 运货马车 返回本地存储中的值,而不是在第一次装载时返回空数组?

3 回复 | 直到 2 年前

Isha Padalia 2 年前

当您的组件装载时,您的购物车的初始状态似乎遇到了问题。您在第一次装载时看到空数组的原因是操作序列以及useState和useEffect的异步性质。

您初始化 运货马车 使用空数组 useState 。
CartPage组件挂载,此时cart仍然是一个空数组,因为 使用效果 尚未运行。

使用效果 在组件装载后运行,但设置状态是异步的。因此,如果您尝试在组件装载后立即访问cart(例如在CartPage中),它仍然是一个空数组。

 const CartProvider = ({ children }) => {
 const existingCartItems = localStorage.getItem("cart");
 const [cart, setCart] = useState(existingCartItems ? JSON.parse(existingCartItems) : []);

 useEffect(() => {
     if (existingCartItems) {
         setCart(JSON.parse(existingCartItems));
     }
 }, [existingCartItems])

 // ...

 return (
     // ...
 )

}

Ferhat Altundal 2 年前

这将确保setCart在带有解析的cart项目的初始装载时被调用,即使existingCartItems最初为null或未定义。如果existingCartItems为null,它将跳过setCart调用,因为If(parsedCart)检查将失败。通过这种方式,可以防止在初始装载时使用空数组调用setCart。

试试这个:

useEffect(() => {
const parsedCart = JSON.parse(existingCartItems);
if (parsedCart) {
    setCart(parsedCart);
} }, []);

Anjali Kalsariya 2 年前

更改本地存储时不会调用UseEffect。所以这就是为什么得到一个空数组。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前