Question

我正在使用useContext更新计数器，并且一切正常，直到我在新组件上使用了它。现在我得到了：对象不是可迭代的错误。

我有点困惑，因为相同的代码正在其他组件上工作。

我的环境：

import { createContext } from "react";

const CartContext = createContext();
export default CartContext;

提供者：

  const [cartValue, setCartValue] = useState(0);
  return (
    <div>
      <CartContext.Provider value={[cartValue, setCartValue]}>
        <Navigation />
        {children}
        <ToastContainer />
      </CartContext.Provider>
    </div>
  );

处理x组件：

const [cartValue, setCartValue] = useContext(CartContext);

无法在y组件上运行同一行代码：

const [cartValue, setCartValue] = useContext(CartContext);
//causing TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))

我在此组件中使用上下文：产品卡

导航

购物车->这里不起作用

Answer 1

我不太确定您为什么会收到此特定错误，但我非常确定您是否以意外的方式使用useContext。

如果您查看useContext documentation，您会发现它仅用于将当前组件订阅到某个提供程序。

useContext（MyContext）仅允许您读取上下文并订阅其更改。您仍需要在树中上方的来提供此上下文的值。

执行此操作的“反应方式”如下：

将cartValue存储在根组件中（不一定是应用程序根目录，但要足够“高”即可）
将根中存储的cartValue传递给上下文提供程序
将setCartValue函数传递给应该能够更改值的任何组件

代码应该是这样的：

const [cartValue, setCartValue] = useState(0);
  return (
    <div>
      <CartContext.Provider value={cartValue}>
        <Navigation />
           // inside AnyOtherComponent you have to use useContext
           <AnyOtherComponent handleCartChange={setCartValue}/>
        <ToastContainer />
      </CartContext.Provider>
    </div>
  );

要进一步参考，请查看dynamic contexts。

使用useContext时对象不可迭代

1 个答案: