#reactjs #axios #material-ui
Вопрос:
Поэтому я использовал модальный компонент из 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)=>{
})
}
Ответ №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. Мне кажется, что все изменения состояния лучше не вводить в функцию asyn.
Комментарии:
1. Именно так работают асинхронные функции. Сначала вы помещаете его внутрь then () , что происходит после того, как обещание выполнено. Но при более поздней реализации это происходит после вызова асинхронной функции, и она не будет ждать, пока обещание не будет выполнено. Вот почему предыдущая ошибка не произошла во 2-й раз.