javascript - React Context Hook 状态没有改变

Question

我正在创建一个简单的 MERN 身份验证，我的后端工作得很好，并且已经用邮递员对其进行了测试，它在检查用户是否登录时会给出布尔响应。

下面是路由器检查登录用户，并将布尔值发送到前端。

router.get("/loggedIn", (req, res) => {
  try {
    const token = req.cookies.token;
    if (!token) return res.json(false);

    jwt.verify(token, process.env.JWT_SECRET);
    res.send(true);
  } catch (err) {
    res.json(false);
  }
});

在 React 中，我使用 Context Hook 来使用 Axios 获得响应。

import React, { useState, useEffect, createContext } from "react";
import Axios from "axios";

const AuthContext = createContext();

function AuthContextProvider(props) {
  const [loggedIn, setLoggedIn] = useState(undefined);

  const getLoggedIn = async () => {
    await Axios.get("http://localhost:5000/auth/loggedIn")
      .then((res) => setLoggedIn(res.data))
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    getLoggedIn();
  }, []);

  return (
    <AuthContext.Provider value={{ loggedIn, getLoggedIn }}>
      {props.children}
    </AuthContext.Provider>
  );
}

export default AuthContext;
export { AuthContextProvider };

我正在使用有条件地渲染某些组件，但是如果我从开发工具条件渲染中更改状态loggedIn，它的值或状态始终保持不变。false

AuthContext执行，

const { loggedIn } = useContext(AuthContext);

 {loggedIn === false && (
                <Link className="nav-link" to="/login">
                  <FaUser />
                </Link>
            )}

            {loggedIn === true && (
                <Link className="nav-link" to="/logout">
                  <Button variant="outline-dark">Logout</Button>
                </Link>
            )}

如您所见，我只想有条件地渲染一个组件，但它总是返回false

我是 ContextHook 的新手。

标签： javascriptreactjsreact-hooksmernreact-context