时间戳

首页 > 解决方案 > React Hooks 状态总是落后一步

reactjs - React Hooks 状态总是落后一步

问题描述

我在重置页面时遇到了问题 = 1。在handleSearchClick我有setPage(1)但它的一次点击晚了，所以在第二次点击之后页面将重置为 1

这是我当前的代码

const [page, setPage] = React.useState(1);
//Other states as well 

    /**
     * Handles event on search click
     */
    const handleSearchClick = async () => {
        setItems([]);
        const database = handleBaseId();
        setPage(1);
        const items = await fetchSearchPayload(page, value, option, database);
        setIsLoading(false);
        setItems(items);
    };

我也尝试在按钮本身中重置页面，但收到react limits the number of renders to prevents an infinite loop错误消息

这就是我尝试做的

<SearchBar
     onClickButton={handleSearchClick}
     onValueChange={handleChange}
     value={value}
     pageNum={page}
     onEnter={handleSearchOnEnter}>

   {setPage(1)}

</SearchBar>

我还尝试使用useEffect并添加了一个count每次searchBar单击时都会增加的状态，但是我遇到了 count 本身落后一步的问题。

const [count, setCount] = React.useState(0);

React.useEffect(() => {
        setPage(1);
    }, [count]);

    /**
     * Handles event on search click
     */
    const handleSearchClick = async () => {
        setCount(count+1);
        setItems([]);
        const database = handleBaseId();
        setPage(1);
        const items = await fetchSearchPayload(page, value, option, database);
        setIsLoading(false);
        setItems(items);
    };

任何有关如何在page没有任何延迟的情况下重置的建议都值得赞赏！

标签： reactjsreact-hooks

解决方案

您似乎正在尝试设置页面（异步），然后立即在您的通话中使用该page状态。fetchSearchPayload考虑到您总是在此处硬编码将页面设置为 1，您也可以在fetchSearchPayload通话中硬编码 1。

您可以采用的另一条路线是仅在页面更新后通过执行以下操作进行异步调用：

React.useEffect(() => {
    const database = handleBaseId();
    const items = await fetchSearchPayload(page, value, option, database);
    setIsLoading(false);
    setItems(items);
}, [ page ]);

/**
 * Handles event on search click
 */
const handleSearchClick = async () => {
    setItems([]);
    setPage(1);
};

推荐阅读