javascript - 在 axios 发布后使用 React 钩子设置状态

Question

我试图弄清楚如何在 axois 发布请求后使用反应钩子设置我的用户状态。努力寻找一个好的解决方案。我已经阅读了 react hooks 文档，并且我发现的几乎所有示例都只是在页面加载时。我想在用户登录时在表单提交上设置状态。

登录.js

   const handleLogin = (evt) => {
    //Prevent default form submission
    evt.preventDefault();

    const loginDetails = {
        username: username,
        password: password,
    }
    //send login request to api
    axios.post('http://localhost:5000/users/login', loginDetails)
    .then((res) => {
      setUser(loginDetails.username);
      history.push('/');
    })
    .catch((err) => {
      console.log('incorrect password/user');
      history.push('/login');
    })
}

由于异步行为，在重定向之前未设置状态。我也尝试将重定向放在 useEffect 中，但它会不断重新加载页面，即使我过去依赖项也是如此。如何确保我的状态正在设置，在history.push('/')生效之前作为道具传递到我的导航栏组件中。

编辑

应用程序.js

  return (

    <Router history={history} >
      <div className={styles.app}>
          <Navbar user={user}/>
          <Switch>
            <Route exact path="/" component={Home}/>
            <Route path="/about" component={About}/>
            <Route exact path="/blog" component={Blog}/>
            <Route exact path="/blog/create" component={CreateBlog}/>
            <Route exact path="/blog/:id" component={ViewBlog}/>
            <Route path="/demo" component={Demo}/>
            <Route path='/resume' component={Resume}/>
            <Route 
            exact path="/login" 
            render={(props) => (
              <Login loginHandler={handleLogin}
                     usernameHandler={onChangeUsername}
                     passwordHandler={onChangePassword}/>)}
              />
            <Route exact path="/register" render={(props) => (
              <Register usernameHandler={onChangeUsername}
                        passwordHandler={onChangePassword}
                        handleRegister={handleRegister}/>
            )}/>
            
              
          </Switch>
          <Footer/>
      </div>
      
    </Router>
  );
}

export default App;

标签： javascriptnode.jsreactjsexpress