反应原生 | useState 异步等待答案

【问题标题】：React Native | useState Async-Await反应原生 | useState 异步等待
【发布时间】：2021-01-30 19:07:41
【问题描述】：

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

例如，页面的最后一个值为 1，当 3.Click 运行时，它应该在 getReports 中作为 1 工作，但 3 工作。下一个是 1，但我需要那个瞬间。

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

【问题讨论】：

请详细说明并在问题中添加尽可能多的信息，以便给出足够的答案

标签： javascript react-native hook use-state

【解决方案1】：

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

但是如果你只想使用状态，那么你不应该立即调用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);
 }

【讨论】：

我的个人资料新 :') 积分

【解决方案2】：

在 React 中设置状态是异步的。这是因为它会重新渲染 dom（或其部分），并且在调用 setState（或钩子）之后的任何代码都将继续正常执行。就设置状态而言，忘记异步等待。

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

【讨论】：

反正我也不会用这个页面，但是既然我用的是flatlist上的reports list，不应该是状态吗？
是的，通过调用 setReports(data) 将报告列表存储在 state 中，其中 data 是来自 api 调用的响应，或者从您获取数据的任何地方。我假设 getReports() 函数需要知道您在哪个页面上？如果是这样，则将其作为参数传递，而不是从状态中获取。如果我误解了，您可能需要澄清您的问题。