[英]React Fetch API Being Called Multiple Times on page load
我有一个连接到 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;
有人可以建议为什么它被称为三遍吗?
你在checkLocation
之外调用checkLocation
,因为这个函数更新状态你几乎无限循环。
解决办法把checkLocation
内useEffect
useEffect(()=>{
checkLocation();
},[])
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.