0

Итак, есть React хук, в котором при клике по кнопке происходит запрос на сервер, в течение этого запроса пользователь может нажать кнопку и отменить запрос. Функционал axios работает как ожидаешь, а вот из-за смены state в React хуках кнопка отмены либо не работает, либо провоцирует ошибку.

Общий ход работы:

  1. Создаем два state - первый для данных пользователя, второй для отображения статуса загрузки данных.
  2. cancelToken - токен отмены устанавливается для каждого запроса пользователя.
  3. При каждом запросе обнуляем имеющиеся данные, если они имелись (пользователь уже жал на кнопку) и ставим статус запроса в true - это отражается в разметке, для демонстрации Waiting-статуса. Именно этот шаг смены state вызывает проблемы, без него отмена запроса проходит нормально.
  4. Когда данные получены, меняем статус выполнения запроса в false и устанавливаем полученные данные пользователя.
  5. Клик по кнопке отмены просто вызывает метод 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>
    )

1 ответ 1

1

Использование локальных переменных в хуковых компонентах допускается только для промежуточных вычислений, т.к. на каждой перерисовке переменная сбрасывается в исходное состояние.

Как вариант, для долговременного хранения переменных можно использовать хук useRef.

const getServerData = () => {

    const [userData, setUserData] = useState(null);
    const [isDataFetched, setFetchingStatus] = useState(false);
    const cancelToken = useRef();

    const fetchSomeData = () => {
        cancelToken.current = Axios.CancelToken.source();

        setFetchingStatus(true);
        setUserData(null);

        Axios.get("api/index", {
            cancelToken: cancelToken.current.token
        }).then(data => {
            setFetchingStatus(false);
            setUserData(data.firstName);
        });
    };

    const cancelRequest = () => {
        cancelToken.current.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>
    )

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.