React中useContext()获取ProductContext返回undefined问题求助

核心问题 #

你的ProductComponent没有被ProductState（也就是Context的Provider组件）包裹。React的Context规则是：只有在Provider的子组件树里的组件，才能通过useContext拿到Provider提供的值。你现在的ProductComponent在Provider外面，所以useContext(ProductContext)返回的是创建Context时的默认值——因为你调用createContext()没传默认值，所以就是undefined。

修复步骤 #

1. 用ProductState包裹需要访问Context的组件 #

找到你的应用根组件（比如App.js），或者ProductComponent的直接父组件，把ProductComponent放在ProductState标签内部：

import ProductState from './context/products/ProductState';
import ProductComponent from './components/ProductComponent';

function App() {
  return (
    <ProductState>
      {/* 所有需要用ProductContext的组件都要放在这里面 */}
      <ProductComponent />
    </ProductState>
  );
}

export default App;

2. 修正ProductComponent的列表渲染错误 #

你在map循环里把整个products数组传给了ProductItems，应该传单个的product对象，同时要加key属性（React列表渲染的必填项）：

{products.map((product) => {
    return <ProductItems product={product} key={product._id} />
})}

额外优化 #

如果想避免组件不在Provider范围内时报错，可以在创建Context时设置默认值：

// productContext.js
import { createContext } from "react";

// 设置默认空数组和空函数，解构时不会报错
const ProductContext = createContext({ products: [], setProducts: () => {} });

export default ProductContext;

内容的提问来源于stack exchange，提问作者Mohammad Abdul Lateef