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

我试图告诉react，单击run

process.env.react\u APP\u LOGOUT

并删除localstorage中设置的项

不幸的是，我必须单击它两次，一旦它第一次单击，您将被重定向到索引页，并且您必须在索引页上再次单击它，以便它发送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>

const注销=（e）=>{
e、 预防默认值（）；
if（Axios.get（process.env.REACT\u APP\u LOGOUT））{
localStorage.removietem（'auth'）；//它首先运行
history.push（“/”）；//发送到索引页，然后我必须再次单击它以执行来自Axios的get请求。
};
};
注销

触发

历史记录。API成功后按

。您可以使用async等待它

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>

const logout=async（e）=>{
e、 预防默认值（）；
试一试{
const res=wait Axios.get（process.env.REACT\u APP\u LOGOUT）
如果（res）{
localStorage.removietem（'auth'）；//它首先运行
history.push（“/”）；//发送到索引页，然后我必须再次单击它以执行来自Axios的get请求。
};
}捕捉（错误）{
控制台日志（err）；
}
}
注销

触发

历史记录。API成功后按

。您可以使用async等待它

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>

const logout=async（e）=>{
e、 预防默认值（）；
试一试{
const res=wait Axios.get（process.env.REACT\u APP\u LOGOUT）
如果（res）{
localStorage.removietem（'auth'）；//它首先运行
history.push（“/”）；//发送到索引页，然后我必须再次单击它以执行来自Axios的get请求。
};
}捕捉（错误）{
控制台日志（err）；
}
}
注销

您可以等待

Axios。获取
承诺以解决问题

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>

const注销=（e）=>{
e、 预防默认值（）
Axios.get（process.env.REACT\u APP\u LOGOUT）
。然后（res=>{
如果（res）{
localStorage.removietem（'auth'）
history.push（“/”）
}
}).catch（错误=>{
//没用
})
}
注销
您可以等待
Axios。获取
承诺以解决问题

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>

const注销=（e）=>{
e、 预防默认值（）
Axios.get（process.env.REACT\u APP\u LOGOUT）
。然后（res=>{
如果（res）{
localStorage.removietem（'auth'）
history.push（“/”）
}
}).catch（错误=>{
//没用
})
}
注销
如果没有一个有效的示例，会有点困难，但是您是否尝试删除，可能其中的某些内容也在侦听单击。@randal您确定需要使用
Axios.get（）
来获取环境变量吗？也许您可以直接使用
process.env.REACT\u APP\u LOGOUT
。是的，我需要在没有工作示例的情况下使用axiosA，但您是否尝试删除，可能其中的某些内容也在侦听单击。@randal您确定需要使用
Axios.get（）
来获取环境变量吗？也许你可以直接使用
process.env.REACT\u APP\u LOGOUT
。是的，我需要使用Axiost这在技术上可行，但它不会重定向
/
索引页。它会被发送到注销页面。（这真的不是一页）我5分钟后接受。谢谢这在技术上是可行的，但它不会重定向
/
索引页。它会被发送到注销页面。（这真的不是一页）我5分钟后接受。在我看来，使注销成为一个异步函数似乎设计过度。在我看来，使注销成为一个异步函数似乎设计过度。