获取错误：调用 axios 获取请求时请求中止

Question

我在调用 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

任何人都可以帮助找出错误发生的原因吗？谢谢