Реагировать useState не меняется

Question

Я пытаюсь настроить аутентифицированные маршруты в реакции и использовать хук 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

Объявите ваш метод внутри хука, а затем вызовите. Добавьте три строки с комментариями. Также 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 2

Просто поместите пустой массив для использованияEffect

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

Answer 3

Я думаю, что проблема в том, что useEffect 2-й аргумент dependencies array не имеет правильных зависимостей.

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

изменить на

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