通过设置状态关闭 Material-ui 模式时，无法对未安装的组件执行 React 状态更新

Question

所以我使用了 material-UI 中的模态组件，并使用“打开”状态挂钩来控制其可见性。在这个组件中，我创建了一个登录页面组件，它将使用 Axios 发布信息并将打开状态设置为 false，从而关闭模式。我点击登录按钮后，控制台报告

无法对未安装的组件执行 React 状态更新。

这是我的代码：

function handleSubmit(e){
    e.preventDefault();
    AxiosInstance
        .post("/api/token/", account)
        .then((res)=>{
            localStorage.setItem('access_token', res.data.access);
            localStorage.setItem('refresh_token', res.data.refresh);
            AxiosInstance.defaults.headers['Authorization'] = 'Bearer '+localStorage.getItem('access_token');
            console.log(res);
            props.setOpen(false);
        })
        .catch((error)=>{
            
        })
}

Answer 1

只需使用一个标志来解决这个问题，以便在 Axios 的 get 请求之外更改状态。

function handleSubmit(e){
    e.preventDefault();
    const flag = false;
    AxiosInstance
        .post("/api/token/", account)
        .then((res)=>{
            localStorage.setItem('access_token', res.data.access);
            localStorage.setItem('refresh_token', res.data.refresh);
            AxiosInstance.defaults.headers['Authorization'] = 'Bearer '+localStorage.getItem('access_token');
            history.push("/#");
            history.push("/home");
            console.log(res);
            flag = true;
        })
        .catch((error)=>{
            
        })
        
    if (flag)
        props.setOpen(false);
}

但是，我仍然不明白 Axios 是如何工作的。似乎所有的状态变化都最好不要放在我的异步函数中。