React Native中已包裹CartProvider仍触发useCart报错问题排查

你的Cart组件存在两个核心问题：

1. useCart调用时机错误：React组件执行逻辑是先运行函数体代码，再渲染JSX。你在Cart组件函数体开头就调用了const { orders } = useCart();，此时组件还未被CartProvider包裹，useContext无法获取上下文，直接触发错误。
2. 冗余嵌套CartProvider：Cart组件内部再次包裹CartProvider完全多余，还会导致上下文隔离——外层index页面的Provider上下文无法被当前组件的useCart获取，且组件内部的Provider还未渲染就已经调用了useCart。

修改Cart组件代码，移除内部的CartProvider，确保useCart处于上层CartProvider的上下文范围内：

const Cart = () => {
  const { orders } = useCart(); // 此时已处于index页面的CartProvider上下文内

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

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

如果Cart是独立路由页面（并非index页面的子组件），需要在路由配置层面对Cart页面包裹CartProvider，示例如下：

// 路由配置示例
<Route path="/cart" element={<CartProvider><Cart /></CartProvider>} />

内容的提问来源于stack exchange，提问作者Lowercase_