React中useContext返回undefined错误求助（结合react-query）

1. 检查Context的创建与导出是否正确 #

确保kitsDataContext.js里的Context创建和导出逻辑无误，建议给Context设置默认值，避免useContext直接返回undefined：

// kitsDataContext.js
import { createContext } from 'react';

// 设默认值null，方便区分是未获取数据还是Provider未生效
const KitsDataContext = createContext(null);

export { KitsDataContext };

注意核对导出的变量名，消费组件导入时必须和导出名一致，别出现拼写错误。

2. 确认消费组件在Provider的包裹范围内 #

检查index.js的根组件结构，必须让SerumRow（及其所有父组件）被KitsDataContext.Provider包裹：

// index.js
import { KitsDataContext } from './kitsDataContext';
import { useQuery } from 'react-query';
import axios from 'axios';
import SerumRow from './SerumRow';

function App() {
  const { data: kitsData } = useQuery('kitsData', () => axios.get('/api/kits'));

  return (
    <KitsDataContext.Provider value={kitsData}>
      {/* SerumRow必须放在Provider内部 */}
      <SerumRow />
    </KitsDataContext.Provider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

如果SerumRow在Provider的外部，useContext会返回Context的默认值（未设默认值就是undefined），这是你当前报错的核心原因之一。

3. 规范useContext的调用方式 #

在SerumRow.js里，必须在函数组件的顶层作用域调用useContext，不能放在条件判断、循环或嵌套函数中，同时确保导入路径正确：

// SerumRow.js
import { useContext } from 'react';
import { KitsDataContext } from './kitsDataContext';

function SerumRow() {
  // 只能在组件顶层调用useContext
  const kitsData = useContext(KitsDataContext);

  // 处理异步请求未完成的情况，比如显示加载状态
  if (!kitsData) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {kitsData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

export default SerumRow;

4. 区分两种不同的undefined情况 #

你之前误以为是axios异步的问题，但实际上：

• 异步请求未完成时，kitsData是undefined，但这是Context传递的value值为undefined，useContext本身不会返回undefined；
• 只有当组件不在Provider范围内、Context导入错误时，才会出现useContext(...) is undefined的报错。

5. 确保react-query的基础配置正确 #

别忘记用QueryClientProvider包裹根组件，否则useQuery无法正常工作，虽然这不是当前报错的直接原因，但会影响数据获取：

// index.js
import { QueryClient, QueryClientProvider } from 'react-query';
import { KitsDataContext } from './kitsDataContext';
// ...其他导入

const queryClient = new QueryClient();

function App() {
  const { data: kitsData } = useQuery('kitsData', () => axios.get('/api/kits'));

  return (
    <KitsDataContext.Provider value={kitsData}>
      <SerumRow />
    </KitsDataContext.Provider>
  );
}

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

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