反应原生 | useState 异步等待

Posted

技术标签:

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

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

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

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

【问题讨论】:

请详细说明并在问题中添加尽可能多的信息,以便给出足够的答案 【参考方案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() 函数需要知道您在哪个页面上?如果是这样,则将其作为参数传递,而不是从状态中获取。如果我误解了,您可能需要澄清您的问题。

以上是关于反应原生 | useState 异步等待的主要内容,如果未能解决你的问题,请参考以下文章

如何在反应中使用带有useState钩子的回调[重复]

反应忽略事件,直到 setState 完成设置 usestate

使用 JSON 数据输出数组数组而不是一个数组来反应 useState Hooks

反应useState不更新值

多次在 API 调用上以反应原生方式呈现屏幕

为啥要按两下才能做我想做的事?反应原生