ReactJS使用Context修改登录状态时报错setAuthState不是函数如何解决

• Context未注入对应值：你仅创建了初始值为空对象的AuthContext，没有在应用上层通过AuthContext.Provider注入authState状态和对应的setAuthState修改方法，所以从Context中解构出来的setAuthState是undefined，调用时就会抛出「不是函数」的错误。
• Hook调用位置错误（若你给出的Login.js代码中useContext调用确实写在Login组件函数外部）：React的useContext属于Hook，只能在React函数组件的内部顶层、或者自定义Hook内部调用，直接写在组件外部无法正常获取Context的值。

1. 首先修改根组件（一般为App.js或main.jsx），定义auth状态并通过Provider注入Context：

import { AuthContext } from "./context/AuthContext";
import { useState } from "react";
import Login from "./components/Login";
import Home from "./components/Home"; // 替换为你的首页组件

function App() {
  // 定义认证状态和对应的修改方法
  const [authState, setAuthState] = useState(false);

  return (
    // 将状态和修改方法通过Provider传递给所有子组件
    <AuthContext.Provider value={{ authState, setAuthState }}>
      {/* 所有需要消费AuthContext的路由/子组件都要放在Provider内部 */}
      <Home />
      <Login />
    </AuthContext.Provider>
  )
}

export default App;

注意：所有需要访问AuthContext值的组件，必须放在AuthContext.Provider的子节点树中，否则无法正常获取Context传递的内容。

2. 修正Login.js的代码，将useContext调用放到Login组件内部顶层，同时补全缺失的状态定义和依赖导入：

import React, { useState, useContext } from "react";
import axios from "axios";
import { AuthContext } from "../context/AuthContext";

const Login = () => {
  // 补全用户名、密码状态定义
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  // 将useContext放到组件内部顶层调用
  const { setAuthState } = useContext(AuthContext);

  const login = () => {
    const data = { username: username, password: password };
    axios.post("http://localhost:3001/auth/login", data).then((response) => {
      if (response.data.error) {
        alert(response.data.error);
      } else {
        alert("Login successful");
        localStorage.setItem("accessToken", response.data);
        setAuthState(true);
      }
    })
  };

  // 此处为你的登录表单渲染逻辑，可根据业务调整
  return (
    <div>
      <input placeholder="用户名" onChange={(e) => setUsername(e.target.value)} />
      <input type="password" placeholder="密码" onChange={(e) => setPassword(e.target.value)} />
      <button onClick={login}>登录</button>
    </div>
  )
}

export default Login;

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