React中使用useContext实现登出功能报错求助

错误原因 #

1. Context值解构方式错误：Menu组件中用数组解构获取Context值，但App里User.Provider传递的是对象{ user, setUser }，并非数组，这会导致setCurrentUser被解析为undefined，调用时就会抛出"TypeError: setCurrentUser is not a function"错误。
2. 登出状态重置不符合预期：App中user初始状态是null，你登出时设置setCurrentUser({})，空对象属于真值，会让Header的判断逻辑user ? <Header /> : <HeaderAuth />仍显示已登录的Header，不符合登出后切换到未登录头部的需求。

修复后的Menu组件代码 #

import { NavLink } from "react-router-dom";
import { useNavigate } from "react-router-dom";
import { useContext } from "react";

// CONTEXT
import User from "../../../contexts/userContext";

export default function Menu() {
  // 使用对象解构获取Context中的值，匹配Provider传递的结构
  const { user: currentUser, setUser: setCurrentUser } = useContext(User);
  const navigate = useNavigate();

  const handleLogOut = () => {
    // 重置为初始的null值，匹配App中的初始状态逻辑
    setCurrentUser(null);
    navigate("/");
  };

  console.log(currentUser);

  return (
    <ul className="menuProfile">
      <li>
        <NavLink to="/profile">Mon profil</NavLink>
      </li>
      <li>
        <button type="button" onClick={handleLogOut}>
          Déconnexion
        </button>
      </li>
    </ul>
  );
}

额外验证点 #

确保你的userContext.js正确创建了Context，示例如下：

import { createContext } from "react";

const User = createContext(null);

export default User;

修改后，登出操作会正确将user状态重置为null，触发Header切换为未登录状态，同时解决了解构错误导致的函数未定义问题。

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