React调用自定义Hook提示setAuth is not a function如何解决

setAuth 取值为 undefined、调用时报不是函数的错误，本质是通过 useAuth() 取到的 Context 对象上不存在 setAuth 属性，常见诱因有两个：

• AuthProvider 组件向 Context 传值时，没有把 setAuth 方法放入 value 属性中
• 调用 useAuth 的 Login 组件没有被包裹在 AuthProvider 的子节点作用域内，此时拿到的是 createContext 时定义的默认初始值，若初始值未定义 setAuth 就会返回 undefined

1. 修正AuthProvider实现 #

先检查 src/context/AuthProvider.js 的代码，确保正确传入状态和更新方法，参考正确写法：

import { createContext, useState } from "react";

// 创建Context时可设置默认占位值，避免未包裹组件时直接报类型错误
const AuthContext = createContext({
  auth: {},
  setAuth: () => {}
});

export const AuthProvider = ({ children }) => {
  const [auth, setAuth] = useState({});

  return (
    // 重点：value必须同时传入auth状态和setAuth更新方法，漏传setAuth是最高发的错误
    <AuthContext.Provider value={{ auth, setAuth }}>
      {children}
    </AuthContext.Provider>
  )
}

export default AuthContext;

注意：不要只把auth状态传入value，漏掉对应的更新方法。

2. 检查组件层级包裹关系 #

确保所有调用 useAuth 的组件（包括你的Login组件），都在 AuthProvider 的子节点树内，参考入口文件的正确包裹写法：

// src/main.jsx 或根组件App.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AuthProvider } from './context/AuthProvider';
import Login from './pages/Login';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* AuthProvider要放在外层，包裹住所有需要鉴权上下文的路由/组件 */}
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/login" element={<Login />} />
          {/* 其余路由配置 */}
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  </React.StrictMode>
)

如果把AuthProvider写在Login组件内部、或者和Login平级放置，会导致Login组件无法拿到Provider传入的上下文值。

3. 快速排查技巧 #

可以临时修改useAuth的代码，打印拿到的上下文内容快速定位问题：

import { useContext } from "react";
import AuthContext from "../context/AuthProvider";
const useAuth = () => {
  const contextValue = useContext(AuthContext);
  console.log("当前获取到的鉴权上下文：", contextValue);
  return contextValue;
}
export default useAuth;

• 如果打印结果里没有setAuth字段：回到AuthProvider检查value传参
• 如果打印结果为undefined：说明当前组件不在AuthProvider的作用域范围内，调整组件包裹层级即可

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