反应本机 | useState 异步等待

Question

我必须更新状态并在函数中使用它。它不会发生，因为我不能让它在当前系统中等待。它获取以前的数据并运行它。怎么拿得住？

比如页面的最后一个值是1，当3.Click是运行，在getReports中应该是1，但是3有效。下一个是1，但我需要那个瞬间。

const onClick = () => {
    setReports([]);
    setPage(1);
    getReports(); <- use page and reports list
}

Answer 1

在 React 中设置状态是异步的。这是因为 re-renders dom（或其部分），以及调用 setState 之后的任何代码（或钩子）将继续正常执行。就设置状态而言，忘记异步等待。

在您的示例中，我应该只将页码传递给 getReports 函数。据我所知，没有必要保留数字状态。此外，对 setReports([]) 的调用看起来也不需要，因为我认为 getReports 无论如何都应该覆盖它。

Answer 2

快速解决方案，获取先前的值，递增它并用这个新值更新状态。在下一行中，将相同的增量值作为参数传递给 getReports(new Value)。在这里，我们将仅使用状态来保留最后一个 number/index.

但是如果你只想使用状态，那么你不应该立即调用 getReports()，相反你可以使用 useEffect 来监听状态的变化，然后在变化时调用方法.类似于：

const [page, setPage] = React.useState(0);

  React.useEffect(() => {
    getReports();
  }, [page]);

 const onClick = () => {
    setReports([]);

    setPage(1);

    // If page number is always incrementing
    setPage(page+1);
 }

反应本机 | useState 异步等待

React Native | useState Async-Await

javascript

hook

react-native

use-state