title: Get Error : Request Aborted when call axios get request
body: <p>I have an issue when call axios request</p>
  <p>Scenario: When user navigate the react app, first it will go to LoginPage and user will input id, an axios request will be called when press enter, to validate the user id, and pass back user details.</p>
  <p>Issue : I am getting &quot;request aborted&quot; when call axios request in LoginPage (*I tested to called the same axios request in app.js, it works)</p>
  <p>App.js code</p>
  <pre><code>function App() {
  
    const [user, setUser] = useState()
  
    return (
      &lt;div&gt;
        &lt;Router&gt;
        {!user?
  
          (
              &lt;LoginPage setUser={setUser} /&gt;
         )
        :(&lt;div className=&quot;AppContainer&quot;&gt;
            &lt;div className=&quot;MainApplicationContainer&quot;&gt;
              &lt;div className=&quot;Header-Container&quot;&gt;
              &lt;/div&gt;
              &lt;div className=&quot;Main-Container&quot;&gt;
                &lt;Switch&gt;
                  &lt;Route path=&quot;/main&quot;&gt;
                      &lt;MainApplicationPage/&gt;
                  &lt;/Route&gt;
                &lt;/Switch&gt;
                &lt;SideBar/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;Footer-Container&quot;&gt;&lt;span&gt;Copyright@ Mawea Industries&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        )}
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>LoginPage.js code</p>
  <pre><code>function LoginPage(props) {
  
      console.log(props)
      const setLogin = async (loginID)=&gt;{
          await axios(`/api/person/getPersonDetails/all/${loginID}`)
                     .then(
                         res =&gt; {
                             console.log(res)
                              props.setUser(res.data)
                              localStorage.setItem('loginUser',JSON.stringify(res.data))
                         }
                     )
                     .catch(
                         err =&gt;{
                          console.log(err)
                          props.setUser(null)
                         }
                     )
      }
  
  
      return (
          &lt;div className=&quot;LoginContainer LoginBackGround&quot;&gt;
              &lt;div className=&quot;LogoContainer&quot;&gt;
                  &lt;span className=&quot;Logo&quot;/&gt;
              &lt;/div&gt;
              &lt;div className=&quot;FormContainer&quot;&gt;
                  &lt;form className=&quot;LoginForm&quot;&gt;
                      &lt;label className=&quot;login-tag&quot;&gt;LOGIN&lt;/label&gt;
                      &lt;table&gt;
                          &lt;tbody&gt;
                              &lt;tr className=&quot;form-login-row&quot;&gt;
                                  &lt;td&gt;&lt;input className=&quot;login-input&quot; type=&quot;text&quot;
                                      placeholder=&quot;Employee ID&quot; 
                                      onKeyPress={ ev =&gt; {
                                              //ev.preventDefault();
                                              if(ev.key===&quot;Enter&quot;) setLogin(ev.target.value)
                                      }}/&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                      &lt;div className=&quot;DummyContainer&quot;&gt;&lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default LoginPage
  </code></pre>
  <p>Error:
  [1]: <a href="https://i.stack.imgur.com/uVmzc.png" rel="nofollow noreferrer">https://i.stack.imgur.com/uVmzc.png</a></p>
  <p>Can anyone help to figure out why the error is occurs? Thank you</p>