即使组件被包装，useContext 包装也会抛出错误 [React Native]

Question

我将所有组件和屏幕包装在 CartProvide 内，但它仍然显示“useCart 必须在 CartProvider 中使用”

我想显示总订单的收据，但它显示错误

下面是我的 CartContext 代码

type CartItem = {
  name: string;
  price: number;
  imageUrl: any;
  type: "FOOD" | "DRINK";
};

interface CartContextType {
  orders: CartItem[];
  addToCart: (item: CartItem) => void;
  clearCart: () => void;
}

const CartContext = createContext<CartContextType | undefined>(undefined);

export const CartProvider = ({ children }: { children: React.ReactNode }) => {
  const [orders, setOrders] = useState<CartItem[]>([]);

  const addToCart = (item: CartItem) => {
    setOrders((prevOrders) => [...prevOrders, item]);
  };

  const clearCart = () => {
    setOrders([]);
  };

  return (
    <CartContext.Provider value={{ orders, addToCart, clearCart }}>
      {children}
    </CartContext.Provider>
  );
};

export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) {
    throw new Error("useCart must be used within a CartProvider");
  }
  return context;
};

我的索引

const index = () => {
  return (
    <CartProvider>
      <View style={{ flex: 1 }}>
        <Greet />
        <Menu />
      </View>
    </CartProvider>
  );
};

和我的购物车屏幕

const Cart = () => {
  const { orders } = useCart(); // Fetch cart orders

  
  const total = orders.reduce((sum, item) => sum + item.price, 0);

  return (
    <CartProvider>
      <ScrollView>
        <Header />
        <CartComp
          itemPrices={orders.map((item) => item.price)}
          menus={orders.map((item) => item.name)}
          total={total}
        />
      </ScrollView>
    </CartProvider>
  );
};

我已经将所有内容包装在 CartProvider 内，但它仍然显示错误，这是怎么发生的？

Answer 1

我认为抛出错误是因为在

CartProvider

中双重包装了相同的内容。在

index.ts

中，您用

CartProvider

包装整个应用程序，但您也将

Cart

屏幕组件包装在另一个 CartProvider 中。

它可能会产生与上下文创建及其在树中的外观相关的问题。结果，

useCart

钩子检查上下文，发现它未定义，并抛出您在

useCart

钩子中定义的错误消息：

export const useCart = () => {
  const context = useContext(CartContext);
  if (!context) { // true
    throw new Error("useCart must be used within a CartProvider");
  }
  return context;
};

您只需要一个 CartProvider 来管理您的应用程序/应用程序的一部分的状态。

顺便说一句，最好只包装应用程序中实际使用提供程序中上下文的部分。这可以最大限度地减少不依赖上下文的组件不必要的重新渲染，从而提高性能。

我希望它有帮助:)