Итак, есть React хук, в котором при клике по кнопке происходит запрос на сервер, в течение этого запроса пользователь может нажать кнопку и отменить запрос. Функционал axios работает как ожидаешь, а вот из-за смены state в React хуках кнопка отмены либо не работает, либо провоцирует ошибку.
Общий ход работы:
- Создаем два state - первый для данных пользователя, второй для отображения статуса загрузки данных.
- cancelToken - токен отмены устанавливается для каждого запроса пользователя.
- При каждом запросе обнуляем имеющиеся данные, если они имелись (пользователь уже жал на кнопку) и ставим статус запроса в true - это отражается в разметке, для демонстрации Waiting-статуса. Именно этот шаг смены state вызывает проблемы, без него отмена запроса проходит нормально.
- Когда данные получены, меняем статус выполнения запроса в false и устанавливаем полученные данные пользователя.
- Клик по кнопке отмены просто вызывает метод cancel токена. Если использовать вышеуказанную смену state, то этот шаг провоцирует ошибку - "Cannot read property 'cancel' of null", без нее ошибки нет.
const getServerData = () => {
const [userData, setUserData] = useState(null);
const [isDataFetched, setFetchingStatus] = useState(false);
let cancelToken = null;
const fetchSomeData = () => {
cancelToken = Axios.CancelToken.source();
setFetchingStatus(true);
setUserData(null);
Axios.get("api/index", {
cancelToken: cancelToken.token
}).then(data => {
setFetchingStatus(false);
setUserData(data.firstName);
});
};
const cancelRequest = () => {
cancelToken.cancel();
};
return (
<div>
{
isDataFetched
&&
<div>
<h1>WAITING</h1>
<div><button onClick={cancelRequest}>Cancel request</button></div>
</div>
}
<p>{ userData && userData.toString()}</p>
<p>
<button onClick={fetchSomeData}>Click me</button>
</p>
</div>
)