Question

我试图在react中设置经过身份验证的路由，并在用户经过身份验证后将useState挂钩更改为true。从服务器获取用户数据时，我可以更新当前用户信息，但是用于身份验证的useState钩子不会从true更改为false，反之亦然。

import { useState, useEffect, useContext } from "react";
import { UserContext } from "./UserContext";
import ApiHandler from "../ApiHandler/ApiHandler";

const api = new ApiHandler();
export const useAuth = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const userContext = useContext(UserContext);
  const { currentUser, setCurrentUser } = userContext;

  useEffect(() => {
    api
      .get("/is-loggedin")
      .then(res => {
        setCurrentUser(res.data.currentUser);
        setIsLoggedIn(true);
      })
      .catch(err => {
        setCurrentUser(null);
        setIsLoggedIn(false);
      });
  }, [setCurrentUser]);
  return { isLoggedIn, currentUser };
};

Answer 1

我认为问题在于useEffect第二个参数dependencies array没有正确的依赖性。

useEffect(() => { /* rest of the code */ }, [setCurrentUser]);

更改为

useEffect(() => { /* rest of the code */ }, [setCurrentUser, isLoggedIn]);

Answer 2

在挂钩中声明您的方法，然后调用。添加具有注释的三行。另外，currentUser是依赖项，因为如果用户更改了，您将检查它是否已登录。您的错误是

1）-在依赖项中传递setCurrentUser（因为它是函数/处理程序，所以永远不会改变）。
2）-既未声明方法也未调用方法，而只是将语句传递给useEffect，后者仅运行一次。

import { useState, useEffect, useContext } from "react";
import { UserContext } from "./UserContext";
import ApiHandler from "../ApiHandler/ApiHandler";

const api = new ApiHandler();
export const useAuth = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const userContext = useContext(UserContext);
  const { currentUser, setCurrentUser } = userContext;

  useEffect(() => {
    function getStatus() { //method body starts
      api.get("/is-loggedin")
      .then(res => {
        setCurrentUser(res.data.currentUser);
        setIsLoggedIn(true);
      })
      .catch(err => {
        setCurrentUser(null);
        setIsLoggedIn(false);
      });
   }; //method body closed.
   getStatus(); //this is the call
  }, [currentUser]);
  return { isLoggedIn, currentUser };
};

Answer 3

只需将一个空数组用于useEffect

          useEffect(() => {
            api
              .get("/is-loggedin")
              .then(res => {
                setCurrentUser(res.data.currentUser);
                setIsLoggedIn(true);
              })
              .catch(err => {
                setCurrentUser(null);
                setIsLoggedIn(false);
              });
          }, []);

反应useState不变

3 个答案: