时间戳

首页 > 解决方案 > 反应钩子useState没有根据需要更新状态？

reactjs - 反应钩子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，所以这不是那种错误。告诫将不胜感激。

标签： reactjsreact-hooksuse-state

解决方案

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只是函数，而不是调用函数的结果。

推荐阅读