React：检索分页列表的所有页面

Question

在我的 React 应用程序中，我有这段代码用于检索一些数据（员工的分页列表）：

  const [propertyFilter, setPropertyFilter] = useState<PropertyFilter>({
    filter: {},
    pageNumber: 1,
    pageSize: 20,
    sortBy: 'Name',
    sortAscending: true,
  })
  const { data, isFetching, refetch } = useGetEmployeesFilteredQuery(propertyFilter)

  useEffect(() => {
    setPropertyFilter((prevFilter) => ({
      ...prevFilter,
      pageNumber: currentPage,
    }))
  }, [currentPage])

  const onApplyFilterRefetch = () => {
    const timer = setTimeout(() => {
      if (!isFetching) refetch()
    }, 500)
    return () => {
      clearTimeout(timer)
    }

稍后可以设置要应用于此数据的过滤器。

但是，稍后在我的页面中，我需要能够导出选定的员工以进行 Excel - 因此，所有符合给定过滤器的员工，不仅仅是一页。

 <div className='p-2'>
                <ExportButton
                  exportType={ExportTypeEnum.EmployeesSelectionExport}
                  ids={data?.filteredItems.map((e) => e.id)}
                />
              </div>

（目前这只给我一页过滤结果）

有什么好的方法可以实现这一目标吗？

Answer 1

您将必须缓存所有获取的结果，以便您可以手动过滤它们并将其发送到 Excel，或者您将需要运行一个新查询来获取与您的用户设置的过滤器匹配的所有项目并发送此新结果集（未分页）到 Excel。

如果您没有在屏幕之间缓存

data

的值，则每个查询都会覆盖该数据，并且您的浏览器不再拥有该数据。