检索具有指定项目金额和偏移量的数据时,第二页和后续页面上会出现显示问题.
例如,在第一页上,数据正确地显示了前10项.但是,当使用分页来访问下一组项目时,尽管提取的数据包含数组中的10个项目,但只返回不同数量的项目:
https://codesandbox.io/s/listing-pokemon-on-datagrid-76w3v5个
取数函数:
const fetchPokemon = async (limit, offset) => {
const response = await fetch(
`https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}`
);
const data = await response.json();
// this returns 10 items
console.log(data);
const returnedValues = {
results: data.results,
count: data.count
};
return returnedValues;
};
数据网格组件:
<DataGrid
autoHeight
columns={cols}
loading={dataGridState.loading}
rowCount={dataGridState.amount}
rows={pokemon}
pagination={{
pageSize: dataGridState.pageSize,
page: dataGridState.offset - 1
}}
pageSize={dataGridState.pageSize}
onPageChange={handlePageSize}
onPaginationModelChange={async (val) => handlePageSize(val)}
/>