React中if-else内修改Context状态报setAuth非函数问题

你遇到的setAuth is not a function报错是3个核心写法错误叠加导致的：

• useContext传参错误：useContext接收的参数必须是createContext生成的Context实例，不是Provider组件；且Provider传递的value是对象结构，直接把返回值赋值给setAuth拿到的不是更新函数。
• Provider嵌套逻辑混乱：你已经在index.js全局套了AuthProvider，又在App.js里重复声明同名状态，还给Routes组件加了它根本不支持的element、value属性，这部分代码完全不生效，还造成状态冲突。
• 状态类型不匹配：你需要存布尔类型的登录态，但AuthProvider里初始auth值写的是空对象，和实际使用场景不符。

1. 修正AuthProvider.js #

把初始状态改成对应布尔类型，补全Context默认值避免类型报错：

import { createContext, useState } from "react";

// 初始值匹配实际使用的布尔类型
const AuthContext = createContext({
  auth: false,
  setAuth: () => {}
});

export const AuthProvider = ({ children }) => {
    // 初始值设为false，对应未登录状态
    const [auth, setAuth] = useState(false);

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

export default AuthContext;

2. 清理App.js里的冗余错误代码 #

删掉重复声明的状态，移除Routes上不支持的无效属性：

import React from "react";
import { BrowserRouter,Route, Routes} from 'react-router-dom';
import './App.css';
import Home from "./Pages/Home";
import MapPage from "./Pages/MapPage.js";
import ProtectedRoutes from "./ProtectedRoutes";

function App() {
  return (  
    <BrowserRouter>
      <Routes>
        <Route element ={<ProtectedRoutes />}>
            <Route element={<MapPage />} path="/map" exact/>
        </Route>
        <Route path="/" element={<Home />}/>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

注意：你在index.js已经全局包裹了AuthProvider，这里不需要重复引入包裹。

3. 修正Home.js里的Context用法 #

替换错误的Context引入方式，把原生页面跳转改成路由跳转避免状态丢失：
首先补全正确的导入：

import { useContext, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Axios from 'axios';
import AuthContext from '../components/AuthProvider'; // 按你的实际文件路径调整

然后修正组件内逻辑：

function Home() {
  // 正确传入Context实例，解构出需要的更新函数
  const { setAuth } = useContext(AuthContext);
  const navigate = useNavigate(); // 用路由跳转代替原生window跳转，避免整页刷新丢失Context状态

  const [usernameReg, setUsernameReg] = useState("");
  const [passwordReg, setPasswordReg] = useState("");
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [loginStatus, setloginStatus] = useState("");

  // 删掉uLogin、pLogin这两行原生DOM获取代码，React中通过state拿输入值即可，不需要操作DOM

  const register = () => {
    if (usernameReg === "" || passwordReg === ""){
      alert("Fields can't be blank");
      return;
    }
    Axios.post('http://localhost:3001/register', {
      username: usernameReg,
      password: passwordReg,
    }).then((response) => {
      console.log(response);
    });
  }

  const login = () => {
    Axios.post('http://localhost:3001/login', {
      username: username,
      password: password,
    }).then((response) => {
      if (response.data.message){
        setloginStatus(response.data.message);
        alert(response.data.message);
      }
      else{
        setloginStatus(response.data[0].username);
        setAuth(true); // 此处可正常调用更新函数
        navigate("/map"); // 无刷新跳转，登录状态不会丢失
      }
      console.log(response.data);
    });
  }

  // return部分的表单JSX不需要改动，保留原有代码即可
  return (
    <div className="Home">
      {/* 原有注册、登录表单代码不变 */}
    </div>
  )
}

4. 路由守卫取值对齐 #

后续写ProtectedRoutes路由守卫时，统一从Context拿状态判断即可：

import { useContext } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import AuthContext from './components/AuthProvider';

const ProtectedRoutes = () => {
  const { auth } = useContext(AuthContext);
  return auth ? <Outlet /> : <Navigate to="/" />;
}
export default ProtectedRoutes;

• 如果项目只有2-3个组件需要用到登录态，确实用props传值更简单，Context有点重。
• 但你现在需要做路由守卫、多页面共享登录状态，Context的写法完全合适，改完后的实现没有冗余，结构反而很清晰。后续如果需要存用户信息、token，只需要把auth的初始值改成对象结构扩展即可，维护成本很低。

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