React调用Context的setAuth提示不是函数报错如何解决

触发Uncaught TypeError: setAuth is not a function是以下两个问题导致的，按优先级排查即可：

• 核心原因1：Login组件未被AuthProvider包裹
  你调用createContext({})时传入的默认值是空对象，如果Login组件不在<AuthProvider>的子节点树范围内，useAuth()拿到的就是这个初始空对象，解构出来的setAuth是undefined，调用自然报错。
  必须在应用入口（通常是main.jsx或App.jsx）用AuthProvider包裹根组件，所有需要访问鉴权Context的组件都要放在Provider的子树里：

  // 入口文件示例
  import { AuthProvider } from './AuthContext';
  import App from './App';
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <AuthProvider>
      <App />
    </AuthProvider>
  )
  

  注意导入AuthProvider时必须加花括号，因为你写的是命名导出export const AuthProvider，不是默认导出。

• 核心原因2：模块导入路径/导出不匹配
  从你贴的代码看，AuthContext存在AuthProvider文件中，且默认导出的是AuthContext，但如果你的文件名和导入路径不匹配（比如把Context存在AuthContext.jsx里，useAuth里却写import AuthContext from "./AuthProvider"），就会导入错误的模块，拿不到正确的Context值。
  建议调整文件结构避免混淆，直接用下面修正后的可运行代码即可：

修正后的AuthContext.jsx #

import { createContext, useState } from 'react';

// 初始值写入占位的空setAuth，未包裹Provider时调用也不会抛出模糊的类型错误
const AuthContext = createContext({
  auth: {},
  setAuth: () => {}
});

export const AuthProvider = ({ children }) => {
    const [auth, setAuth] = useState({});
    return (
        <AuthContext.Provider value={{ auth, setAuth }}>
            {children}
        </AuthContext.Provider>
    )
}

export default AuthContext;

修正后的useAuth.js #

import { useContext } from "react";
// 注意导入路径要和你存储AuthContext的文件路径完全一致
import AuthContext from "./AuthContext";

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

export default useAuth;

额外注意 #

你在Login里写的setAuth({authResponce})是对象简写语法，等价于setAuth({ authResponce: authResponce })，会把响应包在一层新对象里。如果你想直接把接口返回的鉴权响应对象存在auth状态中，要去掉外层花括号，写成setAuth(authResponce)。

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