使用上下文API时出现此错误.TypeError:对象不可迭代(无法读取属性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

上下文API没有任何问题，您只需要将组件封装在其中即可。

下面是我的解决方案

<CartValue>
<ChildContext />
</CartValue>

Answer 2

您将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 3

更改：

const [cart,setCart]=useContext(CartContext)

至

const cart = useContext(CartContext)

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