我设置了新的状态，但在下一行函数调用中保持不变

Question

我有一段代码，我不完全理解它为什么会这样。

const handleLoadMore = () => { setPageNumber(pageNumber+1); fetchData(pageNumber); };

状态pageNumber保持不变，因为我没有更改状态。handleLoadMore函数增量之外。我有点理解它不会增加函数体。那么，有没有告诉fetchData(pageNumber)等待状态更新。

我试着在谷歌上找到如何解决这类问题。我尝试了setTimeout函数，但没有用。

Answer 1

这样做：

const [pageNumber, setPageNumber] = React.useState(0);
const handleLoadMore = () => {
setPageNumber(number => number + 1);
}
React.useEffect(() => {
fetchData(pageNumber);
},[pageNumber])

Answer 2

您的状态设置器函数是异步发生的(默认情况下使用React(，这意味着在调用堆栈清除之前不会执行它，因此在进行fetchData调用之后。

据推测，handleLoadMore功能是基于事件的，就像按钮onClick一样。

因此，将pageNumber + 1直接传递给fetchData函数。无需useEffect。

const handleLoadMore = () => {
setPageNumber(previousNum => previousNum + 1)
fetchData(pageNumber + 1)
}

重要旁注

当使用对其自身的引用更新状态时，最好使用函数参数语法，以确保不会基于对该状态的过时引用进行更新。