React hook useState не обновляет состояние должным образом?

Я понимаю, что вызовы функций useState являются асинхронными, но у меня проблема с событием щелчка и последующим вызовом функции, когда мое состояние не обновляется по мере необходимости.

В настоящее время я запускаю событие onClick для трех кнопок (первая, следующая, последняя). В зависимости от того, что было нажато, я хочу обновить состояние моего хука useState, который контролирует текущую активную страницу:

const [page, setPage] = useState(0);

Вот событие onClick:

const firstNextLast = (event) => {
    if (event.target.name === 'first' && page !== 0) {
        setPage((prevPage) => 0);
    } else if (event.target.name === 'next' && page !== totalPages) {
        setPage((prevPage) => prevPage + 1);
    } else if (event.target.name === 'last') {
        setPage((prevPage) => totalPages);
    }
    fetchFirstNextLast();
};

Вот функция fetchFirstNextLast ():

const fetchFirstNextLast = () => {
    const params = {
        area: uriEncodeGJ.current,
        page,
        size: pageSize,
    };
    getEGMModelsWithin(gravitationalModel[0], params)
    .then((data) => {
        setGridData(data);
        setSuccess(true);
        setPage(data.data.pageNumber);
        setPageSize(data.data.pageSize);
        updateLat(data);
    })
    .catch((err) => {
        setGridData(err);
        setSuccess(false);
    });
};

Проблема в том, что значение page не обновляется, когда я вызываю fetchFirstNextLast (); Я даже попытался передать fetchFirstNextLast () в качестве обратного вызова для setPage () вот так:

const firstNextLast = (event) => {
    if (event.target.name === 'first' && page !== 0) {
        setPage((prevPage) => 0, fetchFirstNextLast());
    } else if (event.target.name === 'next' && page !== totalPages) {
        setPage((prevPage) => prevPage + 1, fetchFirstNextLast());
    } else if (event.target.name === 'last') {
        setPage((prevPage) => totalPages, fetchFirstNextLast());
    }
};

Ни одна из этих попыток не сработала. Кроме того, я проверил, использую ли я setPage () для возврата состояния обратно к 0 где-либо еще в программе, так что это не ошибка такого рода. Будем очень признательны за замечание.


reactjs react-hooks use-state
person N8BIZ    schedule 12.01.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Обновления состояния в React обрабатываются асинхронно, поэтому page может не обновляться при вызове fetchFirstNextLast. Он должен работать, если вы передадите fetchFirstNextLast в качестве обратного вызова, например:

const firstNextLast = (event) => {
    if (event.target.name === 'first' && page !== 0) {
        setPage((prevPage) => 0, fetchFirstNextLast);
    } else if (event.target.name === 'next' && page !== totalPages) {
        setPage((prevPage) => prevPage + 1, fetchFirstNextLast);
    } else if (event.target.name === 'last') {
        setPage((prevPage) => totalPages, fetchFirstNextLast);
    }
};

Обратите внимание, что второй параметр setPages - это просто функция, а не результат ее вызова.

person CerebralFart    schedule 12.01.2021