反应useState没有改变答案

【问题标题】：React useState not changing反应useState没有改变
【发布时间】：2023-04-09 12:14:01
【问题描述】：

我正在尝试在 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 };
};

【问题讨论】：

请，寻求调试或代码帮助的问题必须包含minimal reproducible example 或至少在问题本身中显示问题的代码（不是图像），请参阅How to Ask
您能否将实际代码粘贴到您的问题中？该图像难以搜索和理解。
最好看看你的userContext 代码，因为很多事情都取决于它。

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

改成

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

【讨论】：

您好，我试过了，但还是有问题。控制台指出“index.js:1375 警告：无法对未安装的组件执行 React 状态更新。这是一个无操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消所有订阅和异步任务在 useEffect 清理功能中。”。我试图再次在谷歌上搜索“清理效果”，但没有成功。任何进一步的帮助将不胜感激。谢谢
@AndyBrown 检查我的答案。我遇到了这个问题，所以我用它来回答，实际上是从我的代码中复制粘贴的。

【解决方案2】：

在钩子中声明你的方法，然后调用。添加具有 cmets 的三行。 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 };
};

【讨论】：

【解决方案3】：

只需将一个空数组放入useEffect

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

【讨论】：