Ag-Grid 服务器端分页与 React：选择项目时重置网格

Question

请转到此codesandbox示例以理解并重现以下问题。

• 背景

我正在使用 Ag Grid 在公共分页 API（Pokemon one）上进行服务器端分页，如here所述，并在表格中显示结果。 此外，我希望能够选择表格中的一个项目，并在顶部显示所有选定的项目（存储在 React

state

中）。

• 问题

我的问题是：如果您更改页面（例如第二个页面），并通过单击在表中选择一个项目，

Grid

组件将重新呈现，并且您将被重定向到第一页！我们应该停留在第二页，没有理由重新渲染。

• 临时修复

我通过在具有空依赖项数组的

useCallback()

函数上使用

addItem

以及在

memo

组件上使用

Grid

来管理它。但是出现了一个新问题：eslint 规则“详尽的 deps”被破坏，我们可以在所选项目列表中重复，这是我想避免的。 有什么想法可以在 React 中正确处理这个问题吗？谢谢！

Answer 1

您应该进行如下更改：

setSelectedItems((items) => [...items, item]);

你的代码是对闭包的典型误解。