如何使用反应钩子执行多个异步请求？

Posted 2023-02-19

【中文标题】如何使用反应钩子执行多个异步请求？

【英文标题】：How can I do multiple async requests with react hooks?

【发布时间】：2020-04-28 06:38:44

【问题描述】：

使用反应钩子解决这个 UI 用例的最佳方法是什么 - tiles screenshot

我有每个需要向支持的 API REST 端点发出请求的磁贴。每个模块的图块数量都是可配置的，所以理想情况下，我希望有一些带有诸如

之类的项目数组的配置

标题、文本、异步请求函数

并基于该配置数组，我想做多个异步和并发请求来加载数据。 当适当的请求正在进行时，每个图块都应显示一些微调器，并在数据到达时立即显示数据，而不是在所有数据可用后显示。 我可以通过一些当前可用的钩子（例如 react-hooks-async）来解决它吗？

真正阻碍我的是不能在循环中调用反应钩子。

【问题讨论】：

这里的第三种情况对你有帮助吗？ ***.com/questions/54002792/…

【参考方案1】：

不完全确定我在回答你的问题 Jirko，因为通常最好显示一些你已经尝试过的东西的代码示例。

从我的脑海中，我将有容器组件，其中配置被拉出。然后从配置中映射瓷砖数组并使用您需要作为道具传递的任何设置渲染子组件。

像这样，每个子组件都可以在 useEffect 或您从库中使用的任何钩子中处理自己的获取。

另外，钩子不应该在循环内部工作，这是反模式。

【讨论】：

感谢您的回复。我想保持 TilesComponent 没有钩子的纯净。它只会根据上层组件提供的 props 渲染自己，我们称它为容器。我认为它比它更通用。组件不需要知道数据从哪里来以及如何来的。它只知道它有一些文本、标题、颜色等......但是这种方式我遇到了麻烦，因为现有的异步钩子无法在容器中执行多个异步请求。我发现的唯一可能性是编写自定义异步钩子，它将接受配置并一次执行多个请求。