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

#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-й раз.