标签: react-infinite-scroll

我对我的桌子有以下要求：

1. 表格应该有固定的标题
2. 它需要自动调整大小：为了使无限滚动正常工作，第一次提取应该获得足够的数据量以便滚动出现。
3. 表体应作为无限加载器工作：当滚动到列表末尾时表体应显示加载指示器并加载更多行

我的假设如下：

1. 由于用户将滚动浏览可能较大的数据集，我应该虚拟化列表（反应虚拟化似乎是我唯一的好选择）
2. 因为我们目前有react-table，我想保留它（它有声明表行、列、访问数据和过滤+排序的强大机制）
3. 当我们使用 Material ui 时，我需要使用 Material ui React 组件
4. 因为react-virtualized有自己的Table组件，我可以使用它，但是react-table有不同的渲染行和列的方式，因此我必须使用List组件。（react-table 分隔行和列，而react-virtualized 直接使用列作为 Table 组件的子组件）
5. 我看到react-virtualized可以与名为InfiniteLoader的HOC组件一起使用，所以我也应该使用它
6. 最后，我需要我的列不要仅仅因为它有更多文本（即具有动态高度）而被搞乱。所以我尝试使用 CellMeasurer 来实现这一点。

我能够实现的目标可以在这个沙箱中看到 https://codesandbox.io/s/react-table-infinite-mzkkp?file=/src/MuiTable.js （我无法在这里提供代码，因为它很大）

因此，一般来说，我可以使 Autosizer、CellMeasurer 和 List 组件从反应虚拟化中正常工作。我被困在无限滚动部分。我在官方文档上看到了这个例子，但似乎有点反模式（直接突变状态根本不是一件好事）

所以我试图达到类似的结果，但是如果你能看到，我的 loadMore 函数由于某种原因触发得太早了。它导致几乎每个滚动事件都发送请求。

任何帮助深表感谢。

我已经尝试过的：

1. 使用react-window而不是react-virtualized 它仅适用于简单的用例，并且对于动态大小的单元格会失败。
2. 使用react-inifnite-scrollcomponent（https://www.npmjs.com/package/react-infinite-scroll-component ））它适用于整个页面（无法制作“粘性”标题，无法将加载指示器作为表体，它对长列表没有任何优化）
3. 使用react-virtualized中的Table组件。我无法使其与react-table一起使用（因为react-virtualized中的Table组件似乎直接将Cells渲染为Table组件的子组件。我知道它有renderRow函数，但这意味着两个不同的地方，而react-table有

<TableRow
  {...row.getRowProps({
     style
  })}
  component="div"
  >
  {row.cells.map((cell) => {
     return (
       <TableCell {...cell.getCellProps()} component="div">
         {cell.render("Cell")}
       </TableCell>
      );
   })}
</TableRow>

此外，尚不清楚如何以这种方式呈现自定义过滤器。

我在项目中使用react-infinite-scroll-component，它在对话框之外运行良好。当我滚动到页面底部时，将从服务器获取下一组数据，但我无法在 Material-UI 对话框中获得相同的操作。

这是对话框代码：

//imports\n\nexport default function Posts() {\n  const [open, setOpen] = React.useState(false);\n   //more consts\n   ...\n  const [posts, setPosts] = useState([]);\n  const [page, setPage] = useState(1);\n\n  const fetchPosts = () => {\n    axios.get(`${serverURL}/news?page=${page}`).then((res) => {\n      const result = res.data.results;\n      setPosts([...posts, ...result]);\n      setPage((prev) => prev + 1);\n    });\n    console.log("page", page);\n  };\n\n  useEffect(() => {\n    fetchPosts();\n  }, []);\n\n  return (\n    <div>\n      <h1>News</h1>\n      <Button variant="outlined" color="primary" onClick={handleClickOpen}>\n        Open News Dialog\n      </Button>\n      <Dialog\n        onClose={handleClose}\n        aria-labelledby="customized-dialog-title"\n        open={open}\n      >\n        <DialogTitle id="customized-dialog-title" onClose={handleClose}>\n           News\n …