反应使用状态不变

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