javascript - 在 React 中连接异步数据的最佳实践

Question

目前，我在 3 个独立的史诗中进行了三个 API 调用，并使用 3 个返回的 promise 对象更新特定状态。通过 redux 更新状态后，我试图将所有 3 个数组按一定顺序连接在一起，然后将它们显示在页面上。我认为存在问题，因为这些是异步的，并且数据在不同时间返回。我渲染数据的组件正在寻找这个组合数组，但在渲染发生之前该数组并未完全填充。

有时数组会有几个对象，有时当我搜索相同的东西时它会有 50 个。我知道应该返回的数据对象的确切数量。从我提交搜索查询到数据在页面上呈现时，最好的地方应该是连接所有数据？现在，我正在假设呈现数据的组件的 componentDidMount 中执行 concat，但它不可靠。

试图在一个单独的函数中将 3 个数组合并为一个，然后将其传递给减速器。

还尝试在 componentDidMount 内部进行连接，然后将其传递给减速器。

无法显示代码。

标签： javascriptreactjsasynchronousreduxrxjs

Answer 1

您可能会做的最简单的事情是有一个单一的 api 端点，它返回已经连接在一起的三个数组 - 基本上将此逻辑推送到服务器。但如果这不可行...

我认为您的代码无法按照您想要的方式工作的原因是它componentDidMount只会触发一次 - 当组件最初安装时。由于不同的呼叫需要不同的时间才能返回，因此您只会看到componentDidMount发生火灾时加载的内容。

一些可能的想法：

• 您可以使用的一种方法是将三个数组作为道具传递到您的组件中，然后在render方法中将它们连接起来。当每个组件都被填充时，您的组件将重新呈现自己并使其保持最新。

• 我个人认为 concat 调用是“数据逻辑”（而不是“视图逻辑”），因此将其排除在您的反应组件之外可能是一个好主意。您可以考虑使用Reselect之类的东西将逻辑更多地移动到您的 redux 代码中。

默认情况下，这两种方法都会导致您的 react 组件在每个 ajax 调用返回时重新呈现。如果这对您的数据大小来说是个问题，那么您可以研究优化以使其更快。