求助：使用useContext修改React组件状态时遇setName不是函数错误

核心原因 #

你的Register组件没有被UserContextProvider组件包裹，导致useContext(UserContext)获取的是创建Context时的默认空对象{}，解构出来的setName是undefined，调用自然会报错。

修复步骤 #

1. 确保Register被Provider包裹 #

在应用入口（比如App.js或渲染Register的父组件）中，用UserContextProvider把Register及其他需要访问Context的组件包裹起来：

// 示例：App.js
import { UserContextProvider } from './Register';
import Register from './Register';

function App() {
  return (
    <UserContextProvider>
      <Register />
      {/* 其他需要访问用户Context的组件也放在这里 */}
    </UserContextProvider>
  );
}

2. 清理冗余与错误代码 #

• 合并重复的React API导入，避免冗余：

  // 替换原有的多份导入
  import { createContext, useState, useContext } from "react";
  import React from "react";
  import axios from "axios";
  import PermIdentityOutlinedIcon from "@mui/icons-material/PermIdentityOutlined";
  import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
  import "./Register.css";
  

• 修正state变量名拼写错误：setPasssword改为setPassword，避免后续逻辑出错：

  const [password, setPassword] = useState("");
  

3. 优化axios请求写法 #

不要同时混用await和.then()，推荐用try/catch处理请求错误：

async function handleSubmit(e) {
  e.preventDefault();
  try {
    const response = await axios.post("/register", { username, password });
    setName(username);
    setId(response.data.id); // 注意取response.data，而非直接data
  } catch (error) {
    console.error("注册失败:", error);
  }
}

完整修正后的代码示例 #

import { createContext, useState, useContext } from "react";
import React from "react";
import axios from "axios";
import PermIdentityOutlinedIcon from "@mui/icons-material/PermIdentityOutlined";
import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
import "./Register.css";

const UserContext = createContext({});

export function UserContextProvider({ children }) {
  const [name, setName] = useState(null);
  const [id, setId] = useState(null);
  return (
    <UserContext.Provider value={{ name, setName, id, setId }}>
      {children}
    </UserContext.Provider>
  );
}

const Register = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const { setName, setId } = useContext(UserContext);

  async function handleSubmit(e) {
    e.preventDefault();
    try {
      const res = await axios.post("/register", { username, password });
      setName(username);
      setId(res.data.id);
    } catch (err) {
      console.error("注册出错:", err);
    }
  }

  // 补充原代码缺失的JSX返回
  return (
    <form onSubmit={handleSubmit} className="Register">
      <div>
        <PermIdentityOutlinedIcon />
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
          placeholder="用户名"
        />
      </div>
      <div>
        <LockOutlinedIcon />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          placeholder="密码"
        />
      </div>
      <button type="submit">注册</button>
    </form>
  );
};

export default Register;

内容的提问来源于stack exchange，提问作者Abhinav Kumar Yadav