React Route 运行 进入无限循环
React Route running into an infinite loop
我非常需要你的帮助来调试我代码中的无限反应路由器错误。
我的网站使用 sessionStorage 在本地保存注册详细信息,然后在注册过程结束时上传它们。
window.sessionStorage.setItem("agreement", "true");
window.sessionStorage.setItem("token", "token");
window.sessionStorage.setItem("email", "email");
window.sessionStorage.setItem("country_code", "44");
window.sessionStorage.setItem("firstName", "First name");
window.sessionStorage.setItem("lastName", "Last name");
window.sessionStorage.setItem("userPhone", "XXXXXXXXX");
window.sessionStorage.setItem("verified", "true");
编辑
问题发生在 /location
和 /setup
路由之间。它在其他路线上运行良好,所以我不明白为什么它不起作用
/location
import React, {useState, useEffect} from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
const LocationKYC = ({appLink, loader}) => {
let [error, setError] = useState(null);
let [homeAddress, setHomeAddress] = useState("");
let [workAddress, setWorkAddress] = useState("");
let [stateRegion, setStateRegion] = useState("");
let [city, setCity] = useState("");
let [loading, setLoader] = useState(false);
useEffect(() => {
if(window.sessionStorage.getItem("agreement") === "true" &&
window.sessionStorage.getItem("token") !== null &&
window.sessionStorage.getItem("email") !== null &&
window.sessionStorage.getItem("country_code") !== null &&
window.sessionStorage.getItem("firstName") !== null &&
window.sessionStorage.getItem("lastName") !== null &&
window.sessionStorage.getItem("userPhone") !== null &&
window.sessionStorage.getItem("stateRegion") !== null &&
window.sessionStorage.getItem("homeAddress") !== null &&
window.sessionStorage.getItem("userCity") !== null &&
window.sessionStorage.getItem("verified") !== null) {
console.log("Redirecting ... 1");
window.location.href=appLink.register_step_5_account;
return;
}
if(window.sessionStorage.getItem("agreement") === null ||
window.sessionStorage.getItem("token") === null ||
window.sessionStorage.getItem("verified") === null ||
window.sessionStorage.getItem("country_code") === null ||
window.sessionStorage.getItem("firstName") === null ||
window.sessionStorage.getItem("lastName") === null ||
window.sessionStorage.getItem("userPhone") === null ||
window.sessionStorage.getItem("email") === null) {
window.sessionStorage.clear();
console.log("Redirecting ... 2");
window.location.href=appLink.register_user_agreement;
return;
}
console.log("Redirecting ... 3");
}, []);
const updateKYC = (e) => {
e.preventDefault();
setLoader(true);
if(homeAddress.length < 3) {
setLoader(false);
setError("Home address is not valid");
return;
}
if(city.length < 2) {
setLoader(false);
setError("Phone number is not valid");
return;
}
if(stateRegion.length < 2) {
setLoader(false);
setError("Phone number is not valid");
return;
}
window.sessionStorage.setItem("stateRegion", stateRegion);
window.sessionStorage.setItem("userCity", city);
window.sessionStorage.setItem("homeAddress", homeAddress);
window.sessionStorage.setItem("workAddress", workAddress);
window.location.href=appLink.register_step_5_account;
}
return (
<React.Fragment>
{
!loading ? (
<form method="POST" onSubmit={updateKYC}>
<div className="row">
{
error !== null && (
<div className="col-12 mt-2 mb-2 text-center">
<div className="alert alert-danger" role="alert">
{error}
</div>
</div>
)
}
<div className="col-12 mb-2 mt-2">
<div className="form-group mb-2">
<label htmlFor="">
Home Address ( Address Line 1 )
</label>
<input className="form-control" type="text" onChange={(e) => setHomeAddress(e.target.value)} placeholder="Home Address" required={true}/>
</div>
</div>
<div className="col-12 mb-2 mt-2">
<div className="form-group mb-2">
<label htmlFor="">
Work Address ( Address Line 2 )
</label>
<input className="form-control" type="text" onChange={(e) => setWorkAddress(e.target.value)} placeholder="Optional" />
</div>
</div>
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
State / Region
</label>
<input className="form-control" type="text" onChange={(e) => setStateRegion(e.target.value)} placeholder="Name of Country State / Region" required={true}/>
</div>
</div>
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
City / Town
</label>
<input className="form-control" type="text" onChange={(e) => setCity(e.target.value)} placeholder="Name of City within State / Region" required={true}/>
</div>
</div>
<div className="col-12 mb-2">
<button className="btn btn-block btn-primary" type="submit">
Proceed <i className="fa fa-long-arrow-right"></i>
</button>
</div>
</div>
</form>
) : (
<div className="col-12 mt-5 text-center">
<img src={loader} width="70" height="70" alt="Loading"/>
</div>
)
}
</React.Fragment>
);
}
export default LocationKYC;
/setup
import React, {useState, useEffect} from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
const UserAccount = ({appLink, loader}) => {
let [error, setError] = useState(null);
let [loading, setLoader] = useState(false);
useEffect(() => {
console.log("Set up running");
}, []);
return (
<React.Fragment>
{
!loading ? (
<form method="POST">
<div className="row">
{
error !== null && (
<div className="col-12 mt-2 mb-2 text-center">
<div className="alert alert-danger" role="alert">
{error}
</div>
</div>
)
}
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
Username
</label>
<input className="form-control" type="text" placeholder="Username" />
</div>
</div>
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
Password
</label>
<input className="form-control" type="text" placeholder="Password" />
</div>
</div>
<div className="col-12 mb-2">
<button className="btn btn-block btn-primary" type="button" >Complete Registration
<i className="ml-2 fa fa-check"></i></button>
</div>
</div>
</form>
) : (
<div className="col-12 mt-5 text-center">
<img src={loader} width="70" height="70" alt="Loading"/>
</div>
)
}
</React.Fragment>
);
}
export default UserAccount;
这是我的应用路由路径和路由代码
app_links.jsx
export default (
{
appRoot : "/",
signIn : "/signIn",
register_user_agreement: "/agreement",
register_step_1_create: "/create",
register_step_2_verify: "/verify",
register_step_3_info: "/personal",
register_step_4_location: "/location",
register_step_5_account: "/setup",
register_verify_email: "http://localhost:8080/misc/verify_email",
register_verify_code: "http://localhost:8080/misc/verify_code",
getCountries: "http://localhost:8080/misc/countries",
}
);
路线浏览器
index.js
<React.StrictMode>
<Router>
<Switch>
<Route exact path={appLinks.default.appRoot} component={App} />
<Route exact path={appLinks.default.register_user_agreement} component={RenderAgreementPage} />
<Route exact path={appLinks.default.register_step_1_create} component={RenderRegisterPage} />
<Route exact path={appLinks.default.register_step_2_verify} component={RenderVerificationPage} />
<Route exact path={appLinks.default.register_step_3_info} component={RenderPersonalInfo} />
<Route exact path={appLinks.default.register_step_4_gh_location} component={RenderLocationInfo} />
<Route exact path={appLinks.default.signIn} component={RenderUserSignIn} />
<Route exact path={appLinks.default.register_step_5_account} component={RenderAccountConfiguraton} />
</Switch>
</Router>
</React.StrictMode>,
document.getElementById('root')
提前谢谢你。
调试代码花了 1 个多小时,我的浏览器也差点崩溃 :D 。您在代码中输入错误。
您提到的位置路线是
<Route exact path={appLinks.default.register_step_4_gh_location} component={RenderLocationInfo} />
您在 link.
中添加了额外的 gh
我删除并尝试了
<Route exact path={appLinks.default.register_step_4_location} component={RenderLocationInfo} />
这后来工作得很好。我正在调试所有的注册码,没有发现任何错误。最后,我一一检查了你的appLinks,发现了 index.js routes.
中的错字。
由于打字错误,Route路径是空的,当应用程序搜索匹配的路线时,由于这条路线在设置之前,它一直在这里下降。
我非常需要你的帮助来调试我代码中的无限反应路由器错误。 我的网站使用 sessionStorage 在本地保存注册详细信息,然后在注册过程结束时上传它们。
window.sessionStorage.setItem("agreement", "true");
window.sessionStorage.setItem("token", "token");
window.sessionStorage.setItem("email", "email");
window.sessionStorage.setItem("country_code", "44");
window.sessionStorage.setItem("firstName", "First name");
window.sessionStorage.setItem("lastName", "Last name");
window.sessionStorage.setItem("userPhone", "XXXXXXXXX");
window.sessionStorage.setItem("verified", "true");
编辑
问题发生在 /location
和 /setup
路由之间。它在其他路线上运行良好,所以我不明白为什么它不起作用
/location
import React, {useState, useEffect} from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
const LocationKYC = ({appLink, loader}) => {
let [error, setError] = useState(null);
let [homeAddress, setHomeAddress] = useState("");
let [workAddress, setWorkAddress] = useState("");
let [stateRegion, setStateRegion] = useState("");
let [city, setCity] = useState("");
let [loading, setLoader] = useState(false);
useEffect(() => {
if(window.sessionStorage.getItem("agreement") === "true" &&
window.sessionStorage.getItem("token") !== null &&
window.sessionStorage.getItem("email") !== null &&
window.sessionStorage.getItem("country_code") !== null &&
window.sessionStorage.getItem("firstName") !== null &&
window.sessionStorage.getItem("lastName") !== null &&
window.sessionStorage.getItem("userPhone") !== null &&
window.sessionStorage.getItem("stateRegion") !== null &&
window.sessionStorage.getItem("homeAddress") !== null &&
window.sessionStorage.getItem("userCity") !== null &&
window.sessionStorage.getItem("verified") !== null) {
console.log("Redirecting ... 1");
window.location.href=appLink.register_step_5_account;
return;
}
if(window.sessionStorage.getItem("agreement") === null ||
window.sessionStorage.getItem("token") === null ||
window.sessionStorage.getItem("verified") === null ||
window.sessionStorage.getItem("country_code") === null ||
window.sessionStorage.getItem("firstName") === null ||
window.sessionStorage.getItem("lastName") === null ||
window.sessionStorage.getItem("userPhone") === null ||
window.sessionStorage.getItem("email") === null) {
window.sessionStorage.clear();
console.log("Redirecting ... 2");
window.location.href=appLink.register_user_agreement;
return;
}
console.log("Redirecting ... 3");
}, []);
const updateKYC = (e) => {
e.preventDefault();
setLoader(true);
if(homeAddress.length < 3) {
setLoader(false);
setError("Home address is not valid");
return;
}
if(city.length < 2) {
setLoader(false);
setError("Phone number is not valid");
return;
}
if(stateRegion.length < 2) {
setLoader(false);
setError("Phone number is not valid");
return;
}
window.sessionStorage.setItem("stateRegion", stateRegion);
window.sessionStorage.setItem("userCity", city);
window.sessionStorage.setItem("homeAddress", homeAddress);
window.sessionStorage.setItem("workAddress", workAddress);
window.location.href=appLink.register_step_5_account;
}
return (
<React.Fragment>
{
!loading ? (
<form method="POST" onSubmit={updateKYC}>
<div className="row">
{
error !== null && (
<div className="col-12 mt-2 mb-2 text-center">
<div className="alert alert-danger" role="alert">
{error}
</div>
</div>
)
}
<div className="col-12 mb-2 mt-2">
<div className="form-group mb-2">
<label htmlFor="">
Home Address ( Address Line 1 )
</label>
<input className="form-control" type="text" onChange={(e) => setHomeAddress(e.target.value)} placeholder="Home Address" required={true}/>
</div>
</div>
<div className="col-12 mb-2 mt-2">
<div className="form-group mb-2">
<label htmlFor="">
Work Address ( Address Line 2 )
</label>
<input className="form-control" type="text" onChange={(e) => setWorkAddress(e.target.value)} placeholder="Optional" />
</div>
</div>
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
State / Region
</label>
<input className="form-control" type="text" onChange={(e) => setStateRegion(e.target.value)} placeholder="Name of Country State / Region" required={true}/>
</div>
</div>
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
City / Town
</label>
<input className="form-control" type="text" onChange={(e) => setCity(e.target.value)} placeholder="Name of City within State / Region" required={true}/>
</div>
</div>
<div className="col-12 mb-2">
<button className="btn btn-block btn-primary" type="submit">
Proceed <i className="fa fa-long-arrow-right"></i>
</button>
</div>
</div>
</form>
) : (
<div className="col-12 mt-5 text-center">
<img src={loader} width="70" height="70" alt="Loading"/>
</div>
)
}
</React.Fragment>
);
}
export default LocationKYC;
/setup
import React, {useState, useEffect} from 'react';
/* eslint-disable react-hooks/exhaustive-deps */
const UserAccount = ({appLink, loader}) => {
let [error, setError] = useState(null);
let [loading, setLoader] = useState(false);
useEffect(() => {
console.log("Set up running");
}, []);
return (
<React.Fragment>
{
!loading ? (
<form method="POST">
<div className="row">
{
error !== null && (
<div className="col-12 mt-2 mb-2 text-center">
<div className="alert alert-danger" role="alert">
{error}
</div>
</div>
)
}
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
Username
</label>
<input className="form-control" type="text" placeholder="Username" />
</div>
</div>
<div className="col-12 mb-2">
<div className="form-group mb-2">
<label htmlFor="">
Password
</label>
<input className="form-control" type="text" placeholder="Password" />
</div>
</div>
<div className="col-12 mb-2">
<button className="btn btn-block btn-primary" type="button" >Complete Registration
<i className="ml-2 fa fa-check"></i></button>
</div>
</div>
</form>
) : (
<div className="col-12 mt-5 text-center">
<img src={loader} width="70" height="70" alt="Loading"/>
</div>
)
}
</React.Fragment>
);
}
export default UserAccount;
这是我的应用路由路径和路由代码
app_links.jsx
export default (
{
appRoot : "/",
signIn : "/signIn",
register_user_agreement: "/agreement",
register_step_1_create: "/create",
register_step_2_verify: "/verify",
register_step_3_info: "/personal",
register_step_4_location: "/location",
register_step_5_account: "/setup",
register_verify_email: "http://localhost:8080/misc/verify_email",
register_verify_code: "http://localhost:8080/misc/verify_code",
getCountries: "http://localhost:8080/misc/countries",
}
);
路线浏览器
index.js
<React.StrictMode>
<Router>
<Switch>
<Route exact path={appLinks.default.appRoot} component={App} />
<Route exact path={appLinks.default.register_user_agreement} component={RenderAgreementPage} />
<Route exact path={appLinks.default.register_step_1_create} component={RenderRegisterPage} />
<Route exact path={appLinks.default.register_step_2_verify} component={RenderVerificationPage} />
<Route exact path={appLinks.default.register_step_3_info} component={RenderPersonalInfo} />
<Route exact path={appLinks.default.register_step_4_gh_location} component={RenderLocationInfo} />
<Route exact path={appLinks.default.signIn} component={RenderUserSignIn} />
<Route exact path={appLinks.default.register_step_5_account} component={RenderAccountConfiguraton} />
</Switch>
</Router>
</React.StrictMode>,
document.getElementById('root')
提前谢谢你。
调试代码花了 1 个多小时,我的浏览器也差点崩溃 :D 。您在代码中输入错误。
您提到的位置路线是
<Route exact path={appLinks.default.register_step_4_gh_location} component={RenderLocationInfo} />
您在 link.
中添加了额外的 gh我删除并尝试了
<Route exact path={appLinks.default.register_step_4_location} component={RenderLocationInfo} />
这后来工作得很好。我正在调试所有的注册码,没有发现任何错误。最后,我一一检查了你的appLinks,发现了 index.js routes.
中的错字。由于打字错误,Route路径是空的,当应用程序搜索匹配的路线时,由于这条路线在设置之前,它一直在这里下降。