Getting this error while using context API. TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

Question

我刚刚尝试使用上下文 api 从另一个组件访问变量，但它抛出了奇怪的错误。

这是我的父组件。

import React,{createContext,useState} from 'react'

export const CartContext=createContext()    

const CartValue =(props)=>{
    const [cart,setCart]=useState(0)
    return (
        <CartContext.Provider value={[cart,setCart]}>
            {props.children}
        </CartContext.Provider>
        
    )
}

export default CartValue

下面是我的子组件。

import React,{useContext} from 'react'
import CartValue,{CartContext} from './CartValue'


function ChildContext() {
    const [cart,setCart]=useContext(CartContext)
    return (
        <div>
           <h3>{cart}</h3>

        </div>
    )
}

export default ChildContext

下面是我遇到的错误。

TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

请解决此问题。提前致谢

Answer 1

您正在将 cart 作为一个值传递给您的 CartContext.Provider，这意味着您的上下文包含 cart 的值，这似乎是一个默认为 0 的数字。但是当使用你的上下文时，你将它视为一个由 useState 返回的数组。这就是您看到错误 Object is not iterable 的原因。这个错误没有什么奇怪的。这只是意味着你试图迭代不是数组或任何可迭代的东西。

如果你想那样做，你需要将从 useState 返回的所有内容放入上下文中，而不仅仅是状态值：

const CartValue =(props)=>{
    const cartState = useState(0)

    return (
        <CartContext.Provider value={cartState}>
            {props.children}
        </CartContext.Provider>  
    )
}

Answer 2

变化：

const [cart,setCart]=useContext(CartContext)

至

const cart = useContext(CartContext)

原因是，您在 CartContext.Provider value={cart} 中提供的值是一个数字，而不是数组。

Answer 3

上下文没有任何问题API您需要做的就是将您的组件包装在其中。

下面是我的解决方案

       <CartValue>
            <ChildContext />
       </CartValue>

Getting this error while using context API. TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

Getting this error while using context API. TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

reactjs

react-redux

react-context