Reactjs 我总是落后一步

我在重置第1页时遇到问题。在

handleSearchClick

中，我有

设置页面（1）

，但它的一次单击延迟，因此第二次单击后页面将重置为1

这是我当前的代码

我还尝试在按钮本身中重置页面，但得到一个

react限制渲染数量，以防止出现无限循环

错误消息

这就是我试着做的

---

如果您对如何在不延迟的情况下重置

页面

有任何建议，我们将不胜感激

似乎您正在尝试设置页面（异步），然后立即在

fetchSearchPayload

调用中使用

page

状态。考虑到您总是在那里硬编码将页面设置为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);
};

---

问题是状态更新与hooks状态更新程序是异步的，就像react组件中的

setState

。解决方案是手动传递页面以运行，而不是依赖于状态

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

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);
    };

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);
};

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