如何将 useInfiniteQuery data.pages 钩子中的所有 page.items 合并到一个数组中？

Question

当使用 react-query 中的 useInfiniteQuery 钩子时，我们得到 data 作为以下对象：

基本上我们在 data.pages 属性中得到多个页面，这是一个页面数组。

每个页面都有一个 items 属性，其中包含结果项数组。

我需要将所有这些 pages[i].items 合并到一个数组中。而且我无法预先确定已提取了多少页。

什么是最好的practice/pattern？

这是要走的路吗？

const allItems = ([] as Array<ItemType>).concat(...data.pages.map((page) => page.items));

Answer 1

我会做：

const allItems = data.pages.flatMap(page => page.items)

如果引用稳定性很重要，请将其包装在 useMemo:

const allItems = React.useMemo(
  () => data.pages.flatMap(page => page.items),
  [data]
)

How to merge all `page.items` from `useInfiniteQuery` data.pages hook into a single array?