React Context API报错：useAuth is undefined 求助

在使用React Context API时遇到TypeError: _Contexts_Authcontext__WEBPACK_IMPORTED_MODULE_6__.useAuth() is undefined错误，已排查拼写和导出无问题，相关代码如下：

AuthContext.js #

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const setAuth = (authBool) => {
    setIsAuthenticated(authBool)
  }

  return (
    <AuthContext.Provider value={{ isAuthenticated, setAuth }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  return useContext(AuthContext);
};

App.js #

import {render} from "react-dom"    
import Cookies from "universal-cookie";
import React, { useEffect } from "react";
import { useAuth, AuthProvider } from './Contexts/Authcontext';


const cookies = new Cookies();

export default function App() {
  const { setAuth } = useAuth()
    useEffect(() => {
      getSession();
    }, []);
  
    const getSession = () => {
      fetch("/authorizer/session/", {
        credentials: "same-origin",
      })
        .then((res) => res.json())
        .then((data) => {
          console.log(data);
          setAuth(data.isAuthenticated);
        })
        .catch((err) => {
          console.log(err);
        });
    };

    return (
        <React.StrictMode>
            <AuthProvider>
                <div id="App">
                    My APP
                </div>
            </AuthProvider>
        </React.StrictMode>
    );
}

const appDiv = document.getElementById("main")
render(<App/>, appDiv)

错误出现在const { setAuth } = useAuth()这一行，提示useAuth未定义。

错误原因分析 #

1. 文件路径大小写不匹配：在区分大小写的文件系统（如Linux、macOS）中，若AuthContext.js文件名是大写C结尾，但导入路径写的是./Contexts/Authcontext（小写c），会导致模块导入失败，进而useAuth未定义。
2. 组件层级错误：App组件本身不在AuthProvider的上下文范围内——AuthProvider是在App的return中渲染的，即使导入正确，在App内部调用useAuth也不符合上下文使用规则，但此场景下错误提示是函数未定义，所以优先级更高的是路径问题。

修复方案 #

方案1：修正文件路径大小写 #

确保导入路径与文件名完全一致，将App.js中的导入改为：

import { useAuth, AuthProvider } from './Contexts/AuthContext';

（注意AuthContext的大写C，与文件名严格匹配）

方案2：调整组件层级，将AuthProvider提升到App外部 #

因为App组件需要使用useAuth，必须让调用useAuth的代码处于AuthProvider的上下文内，所以拆分组件：

修改后的App.js：

import {render} from "react-dom"    
import Cookies from "universal-cookie";
import React, { useEffect } from "react";
import { useAuth, AuthProvider } from './Contexts/AuthContext';


const cookies = new Cookies();

// 将需要使用useAuth的逻辑拆分到子组件中
function AppContent() {
  const { setAuth } = useAuth()
  useEffect(() => {
    getSession();
  }, []);

  const getSession = () => {
    fetch("/authorizer/session/", {
      credentials: "same-origin",
    })
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        setAuth(data.isAuthenticated);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  return (
    <div id="App">
      My APP
    </div>
  );
}

export default function App() {
  return (
    <React.StrictMode>
      <AuthProvider>
        <AppContent />
      </AuthProvider>
    </React.StrictMode>
  );
}

const appDiv = document.getElementById("main")
render(<App/>, appDiv)

这样AppContent组件在AuthProvider包裹下，可以正常调用useAuth。

验证修复 #

1. 确认文件路径大小写完全匹配；
2. 确保使用useAuth的组件在AuthProvider的子组件层级中；
3. 重新启动项目，错误应消失。

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