使用useContext结合Fetch API遇返回undefined问题求助

核心问题1：Context定义位置错误+变量名冲突 #

你在StateContext.js里犯了两个关键错误：

• 把createContext()放在了组件函数内部，导致每次组件渲染都会生成全新的Context实例，消费组件无法匹配到正确的上下文
• 组件名和内部的Context变量同名（都叫StateContext），外部导入时拿到的是组件而非Context对象，useContext自然返回undefined

核心问题2：未用Provider包裹目标组件 #

App.js里直接渲染Products，但没有把它放到StateContext Provider的作用域内，Products根本无法获取到Context的数据。

修正后的代码 #

StateContext.js #

import React, { createContext, useState, useEffect } from "react";

// 把Context定义在组件外部，作为全局对象导出
export const StateContext = createContext();

// 重命名组件，避免和Context变量冲突
const StateContextProvider = (props) => {
  const [data, setData] = useState([]);

  const getData = async () => {
    let url = "http://localhost:4000/products";
    let response = await fetch(url);
    let parsedData = await response.json();
    setData(parsedData);
  };

  useEffect(() => {
    getData();
  }, []);

  return (
    <StateContext.Provider value={data}>
      {props.children}
    </StateContext.Provider>
  );
};

export default StateContextProvider;

App.js #

import './App.css';
import Products from './Products/Products';
import StateContextProvider from './Context/StateContext';

function App(props) { 
  return (
    // 用Provider包裹需要消费Context的组件
    <StateContextProvider>
      <Products />
    </StateContextProvider>
  );
}

export default App;

Products.js #

import React, { useContext } from 'react'
// 导入的是Context对象，不是Provider组件
import { StateContext } from '../Context/StateContext'

const Products = () => {
  const data = useContext(StateContext)
  console.log(data)
  return (
    <div>
      Products
    </div>
  )
}

export default Products

额外注意事项 #

• Context必须定义在组件外部，保证全局唯一，否则消费组件无法稳定获取上下文
• 所有需要使用Context数据的组件，必须被对应的Provider包裹
• 变量名尽量区分组件和Context对象，避免命名冲突

内容的提问来源于stack exchange，提问作者Brahm Bind Singh