DataGrid窗口底部填充允许用户将数据滚动到视图之外(向下滚动太远)

Question

我正在获取DataGrix/XGrid数据，以便在用户滚动到MuiDataGrid-window底部时触发对更多数据的请求。触发有效。然而，问题是触发事件何时发生。

我所说的时间：现在，当大多数数据不再可见时(即，当它隐藏在窗口上方时(，它就会触发。我正试图找出如何删除任何"；填充"；底部。我说"；填充"；在引号中，因为我不怀疑它与css填充或margin属性有任何关系。

有几个html组件在工作：MuiDataGrid窗口、-dataContainer、-renderingZone。还有一个Mui resizeTriggers和扩展触发器。

我查看、比较和对比了Mui文档中有效的内容与我已经启动和运行的内容。

我怀疑，一般来说，有一种方法可以将滚动条与页面底部对齐。顶部似乎总是知道顶部在哪里：(

有没有人有格式化布局以调整底部注册/引用滚动条底部的经验？

提前感谢所有人。

Answer 1

摘要答案

内部网格状态将与rows道具不同步。我相信有一种方法可以解决这个问题，否则，根据文档中提示的问题，我会强制使用apiRef来更新行，然后强制更新。

注：

1. 可能存在一些冗余代码

   • 可能不需要直接使用apiRef，因为我还创建了一个跟踪api状态变化的新副作用&amp；a"；读取一次"；闩锁
   • 调用CCD_ 5来更新行然后强制更新可能是多余的；我怀疑forceUpdate是在调用更新行之后在内部调用的

2. 动态大小调整不是必需的，而是一个额外的功能层，它突出显示网格如何控制视图中的行数(给定rowHeight设置的"视口"的大小(。

什么有效

这有两部分：第一部分是设置要显示的行数。第二，确保网格的内部状态实际上正在被渲染。在这个解决方案之前，额外的滚动与"；内部"；网格的状态，而不是正在渲染的内容(渲染"落后"一个周期(。

DataGrid大小是通过将组件封装在具有固定大小的组件中来设置的。在文档中，他们使用div.我使用MAX_ROWS和ROW_HEIGHT设置的导数来计算gridStyle.height。

// max size is 9 rows before I start scrolling
const gridHeight = (maxRecords, rowHeight, header, footer, adjustment) => {
const gridBody = Math.min(9, Math.max(2, maxRecords)) * rowHeight;
return gridBody + header + footer + adjustment;
};

div中使用计算高度包裹的网格：

<div style={gridStyle}>
<DataGrid
className={clsx('My-ValueGrid', type)}
apiRef={apiRef}
...
/>
</div>

滚动事件处理程序设置状态readyForMore。这个标志相当于一个"；闩锁"；确保当请求的数据status === 'success'

const handleOnRowScrollEnd = ({ viewportPageSize }) => {
if (apiRef.current.getVisibleRowModels().size < MAX_ROWS) {
const nextPageSize = Math.max(PAGE_SIZE, viewportPageSize)
fetchPage({ pageSize: nextPageSize, after: max });
setReadyForMore(true);  // <<< open/reset the latch
}
};

状态标志readyForMore是组件主要效果中的触发器

useEffect(() => {
if (status === 'pending') {
/* do nothing */
}
if (status === 'error') {
setError({ message: JSON.stringify(data.cache) });
}
if (status === 'success' && readyForMore) {
const { rows: newRows, selectedRows: newSelected } = toGridValues(
data.cache,
storeSelectionModel,
);
setSelectionModel([...selectionModel, ...newSelected]);
apiRef.current.updateRows(newRows); // <<< going imperative...
apiRef.current.forceUpdate();  // <<< may not be required
setReadyForMore(false); // <<< close the latch (prevent infinite renders)
setMaxRows(data.cache.totalCount);  // <<< only changes when changing filters
}
}, [
apiRef,
data.cache,
readyForMore,
selectionModel,
status,
storeSelectionModel,
]);