Question

我想告诉我，onClick运行process.env.REACT_APP_LOGOUT并删除本地存储中设置的项目。

不幸的是，我必须单击两次，第一次单击时，您将被重定向到索引页面，并且一旦进入索引页面，您就必须再次单击它才能发送axios get请求，有没有一种方法可以让我一键操作？

导航栏

const logout = (e) => {
    e.preventDefault();
    if(Axios.get(process.env.REACT_APP_LOGOUT)) {
        localStorage.removeItem('auth'); // it runs this first
        history.push('/');  // sends to index page, then i have to click it again for it to execute the get request from Axios.
    };

};


     <Button onClick={logout}>
        <Link className={classes.rightToolbar} to={'/logout'}>
            LogOut
        </Link>
    </Button>

Answer 1

在API成功后触发history.push。您可以使用异步等待

const logout = async (e) => {
    e.preventDefault();
    try {
        const res = await Axios.get(process.env.REACT_APP_LOGOUT)
        if(res) {
            localStorage.removeItem('auth'); // it runs this first
            history.push('/');  // sends to index page, then i have to click it again for it to execute the get request from Axios.
        };

    }catch(err) {
        console.log(err);
    }
}
 <Button onClick={logout}>
    <Link className={classes.rightToolbar} to={'/logout'}>
        LogOut
    </Link>
</Button>

Answer 2

您可以等待Axios.get的诺言解决。

const logout = (e) => {
  e.preventDefault()
  Axios.get(process.env.REACT_APP_LOGOUT)
    .then(res => {
      if (res) {
        localStorage.removeItem('auth')
        history.push('/')
      }
     }).catch(err => {
       // didnt work
     })
 }

<Button className={classes.rightToolbar} onClick={logout}>
  LogOut
</Button>

除非单击两次，否则React onClick不会获得api请求

2 个答案: