我正在使用react-redux with hooks,并且尝试使用ag-grid和infinite scroll来显示数据,但是没有任何运气。我做了很多尝试;这就是我现在拥有的-
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchItems } from './actions';
import { getItems } from './selectors';
let gridApi = null;
const MyGrid = () => {
const items = useSelector(getItems);
const datasource = {
getRows: ({
startRow,
endRow,
sortModel,
filterModel,
successCallback
}) => {
const pageSize = endRow - startRow;
const pageNumber = Math.floor(startRow / pageSize) + 1;
dispatch(fetchItems({ pageNumber, pageSize }));
// I think ag-grid expects results to come in successCallback,
// but have now way of knowing when they will come in
}
};
const onGridReady = params => {
gridApi = params.api;
};
return (
<>
<div className="ag-theme-balham">
<AgGridReact
reactNext={true}
rowModelType="infinite"
paginationPageSize={100}
cacheOverflowSize={2}
maxConcurrentDatasourceRequests={2}
maxBlocksInCache={2}
getRowNodeId={item => item.id}
datasource={datasource}
// rowData={items}
onGridReady={onGridReady}
defaultColDef={{ sortable: true }}
>
<AgGridColumn headerName="Name" field="name" />
<AgGridColumn headerName="Street" field="street" />
<AgGridColumn headerName="City" field="city" />
<AgGridColumn headerName="Phone" field="phoneNumber" />
</AgGridReact>
</div>
</>
);
};
};