我在调用 axios 请求时遇到问题
场景:当用户浏览 React 应用程序时,首先会转到 LoginPage 并输入 id,按 Enter 时将调用 axios 请求,以验证用户 id,并返回用户详细信息。
问题:在 LoginPage 中调用 axios 请求时出现“请求中止”(*我测试在 app.js 中调用了相同的 axios 请求,它有效)
App.js 代码
function App() {
const [user, setUser] = useState()
return (
<div>
<Router>
{!user?
(
<LoginPage setUser={setUser} />
)
:(<div className="AppContainer">
<div className="MainApplicationContainer">
<div className="Header-Container">
</div>
<div className="Main-Container">
<Switch>
<Route path="/main">
<MainApplicationPage/>
</Route>
</Switch>
<SideBar/>
</div>
<div className="Footer-Container"><span>Copyright@ Mawea Industries</span></div>
</div>
</div>
)}
</Router>
</div>
);
}
export default App;
LoginPage.js 代码
function LoginPage(props) {
console.log(props)
const setLogin = async (loginID)=>{
await axios(`/api/person/getPersonDetails/all/${loginID}`)
.then(
res => {
console.log(res)
props.setUser(res.data)
localStorage.setItem('loginUser',JSON.stringify(res.data))
}
)
.catch(
err =>{
console.log(err)
props.setUser(null)
}
)
}
return (
<div className="LoginContainer LoginBackGround">
<div className="LogoContainer">
<span className="Logo"/>
</div>
<div className="FormContainer">
<form className="LoginForm">
<label className="login-tag">LOGIN</label>
<table>
<tbody>
<tr className="form-login-row">
<td><input className="login-input" type="text"
placeholder="Employee ID"
onKeyPress={ ev => {
//ev.preventDefault();
if(ev.key==="Enter") setLogin(ev.target.value)
}}/>
</td>
</tr>
</tbody>
</table>
<div className="DummyContainer"></div>
</form>
</div>
</div>
)
}
export default LoginPage
错误: [1]:https://i.stack.imgur.com/uVmzc.png
任何人都可以帮助找出错误发生的原因吗?谢谢