反应钩子useState没有根据需要更新状态？答案

【问题标题】：React hook useState not updating state as desired?反应钩子useState没有根据需要更新状态？
【发布时间】：2021-04-17 20:01:00
【问题描述】：

我知道对 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);
    });
};

问题在于，当我调用 fetchFirstNextLast(); 时，page 的值没有更新；我什至尝试将 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

【解决方案1】：

React 中的状态更新是异步处理的，因此当您调用 fetchFirstNextLast 时，page 可能不会更新。如果您像这样将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 的第二个参数是函数，而不是函数调用的结果。

【讨论】：