Блог

Поэтому я использовал модальный компонент из material-UI и использовал «открытый» хук состояния для управления его видимостью. В рамках этого компонента я создал компонент страницы входа в систему, который будет публиковать информацию с помощью Axios и устанавливать состояние открытия в значение false, чтобы модал был закрыт. После того, как я нажал кнопку входа в систему, консоль сообщает

Не удается выполнить обновление состояния реакции для размонтированного компонента.

Вот мой код:

 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)=>{
            
        })
}
 

Просто решите эту проблему, используя флаг, чтобы состояние изменялось вне запроса 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. Мне кажется, что все изменения состояния лучше не вводить в функцию asyn.