React Hooks 状态总是落后一步

Question

我在重置页面 = 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时都会递增，但我在计数本身落后一步时遇到了麻烦。

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的任何建议，我们将不胜感激！

Answer 1

您似乎正在尝试设置页面(异步)，然后立即在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);
};

Answer 2

问题是状态更新与钩子状态更新器是异步的，就像 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);
};