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

【问题标题】：React Fetch API Being Called Multiple Times on page load在页面加载时多次调用 React Fetch API
【发布时间】：2021-01-12 07:09:37
【问题描述】：

我有一个连接到 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;

有人可以告知为什么它被调用了三次吗？

【问题讨论】：

仅此功能很难判断。必须有其他东西在调用或更新组件。
这是该组件中唯一发生的事情

标签： javascript reactjs

【解决方案1】：

你在 useEffect 之外调用checkLocation，因为这个函数更新状态你几乎得到无限循环。

解决方案 将checkLocation 放入useEffect

useEffect(()=>{
checkLocation();
},[])

【讨论】：