React Context中cartTotal传递至Header组件报错求助

你在Header组件中解构useCart的顺序错误。CartContext提供的value是[cart, setCart, cartTotal]数组，但你在Header里写成了const [cart, cartTotal] = useCart()，这导致原本的setCart函数被赋值给了cartTotal变量。当你尝试打印或使用这个变量时，实际上操作的是setCart这个dispatch函数，从而触发了Hooks调用的错误提示。

提供两种可行的修正方式，推荐第二种（对象解构），避免后续再出现顺序依赖问题：

方式一：修正数组解构顺序 #

如果继续使用数组形式的Context值，在Header中按正确顺序解构，不需要的变量可以用下划线占位：

// components/Header.jsx
const Header = () => {
    const [auth, setAuth] = useAuth()
    // 用下划线跳过不需要的setCart
    const [cart, , cartTotal] = useCart()
    const categories = useCategory()

    console.log(cartTotal)
    // 后续正常渲染cartTotal即可
}

方式二：改用对象形式传递Context值（推荐） #

修改CartContext的Provider，将value从数组改为对象，这样解构时无需依赖顺序，可读性和健壮性更强：

// context/cart.jsx
const CartProvider = ({ children }) => {
    const [cart,setCart] = useState([])
    const cartTotal = cart.reduce((total, item) => total + item.quantity, 0)
   
    useEffect(() => {
        let existingCartItems = localStorage.getItem("cart")
        if(existingCartItems) setCart(JSON.parse(existingCartItems))
    }, [])

    console.log(cartTotal)

    // 改为对象形式传递
    return (
        <CartContext.Provider value={{ cart, setCart, cartTotal }}>
            {children}
        </CartContext.Provider>
    )
}

然后在Header中用对象解构获取需要的变量：

// components/Header.jsx
const Header = () => {
    const [auth, setAuth] = useAuth()
    // 对象解构，直接取需要的cart和cartTotal
    const { cart, cartTotal } = useCart()
    const categories = useCategory()

    console.log(cartTotal)
    // 正常展示cartTotal即可
}

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