React Fetch API 在页面加载时被多次调用

Question

我有一个连接到 Flask 后端的 React 应用程序。我一直在努力进行身份验证。我有一个用户在成功登录后被重定向到的页面。但是，我正在尝试获取它，以便如果用户在未登录的情况下导航到此路径，他们将被重定向到登录页面。此功能似乎有效，但它调用了我的后端 API 三次，我不确定为什么。

function Overview() {

    const [userName, setUserName] = useState(""); 

    const history = useHistory();

    const location = useLocation();

    function checkLocation() {

        try {

            let comingFrom = location.state.comingFrom;

            const token = location.state.token;

            var login = token + ":unused"; 

            fetch("http://127.0.0.1:5000/api/resource", {

                    headers: {

                    Accept: "application/json",

                    "Access-Control-Allow-Origin": "*",

                    "Content-Type": "application/json",

                    Authorization: "Basic " + Buffer.from(login).toString("base64"),

                    },

                })

                .then((response) => response.json())

                .then((data) => {

                    setUserName(data["data"]);

                });

            

        } catch(error) {

            history.push({

                pathname: "/login"

              });

        }

    }

    checkLocation();

    return <h1>{userName}</h1>;

}

export default Overview;

有人可以建议为什么它被调用三次吗？

Answer 1

你在 useEffect 之外调用checkLocation，因为这个函数更新状态你几乎无限循环。解决方案 放在checkLocation里面useEffectuseEffect(()=>{checkLocation();},[])