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

Context API没什么问题，您所要做的就是将组件包装在里面。

下面是我的解决方法

file 175

使用上下文API时出现此错误。 TypeError：对象不可迭代（无法读取属性Symbol（Symbol.iterator））

3 个答案: