我在下一个js应用程序中使用了MUIDatable。我已经实现了服务器端分页,我将偏移值和限制作为url参数发送,并且数据将由api返回-在每个页面更改时。但是,数据只显示在第一页。当我导航到下一页时,我显示-“没有匹配的记录存在”-尽管数据正在返回的api为该特定的页面.而且当我点击返回到第一页,第二页的数据在默认为第一页的实际数据之前会在第一页上闪烁显示。2有人能告诉我我错过了什么吗?
数据表.jsx
const Datatable = () => {
const [data, setData] = useState([]);
const [isLoaded, setIsLoaded] = useState(false);
const [page, setPage] = useState(0);
const offset = page * 10
const getData = async () => {
try {
const response = await axios.get(`${process.env.url}/provider/api/v1/data&offset=${offset}&limit=10`)
setData(response.data.items)
setIsLoaded(true);
} catch (error) {
console.log(error)
setIsLoaded(true);
}
}
}
const columns = [name: "xxx", label: "XXXX", options: {}]
const options = {
viewColumns: true,
selectableRows: "multiple" ,
fixedSelectColumn: true,
tableBodyHeight: 'auto',
onTableChange: (action, tableState) => {
if (action === "changePage") {
setPage(tableState.page);
setIsLoaded(false);
} else {
console.log("action not handled.");
}
},
serrverSide: true,
count: 100,
textLabels: {
body: {
noMatch: isLoaded?"Sorry, no matching records exist"
:<div className="flex-grow-1 d-flex align-items-center justify-content-end">
<FadeLoader />
</div>,
toolTip: "Sort",
columnHeaderTooltip: column => `Sort for ${column.label}`
},
pagination: {
next: "Next Page",
previous: "Previous Page",
rowsPerPage: "Rows per page:",
displayRows: "of",
},
viewColumns: {
title: "Show Columns",
titleAria: "Show/Hide Table Columns",
},
}
}
useEffect(() => {
getData();
}, [page])
return (
<MUIDataTable
columns={columns}
data={data}
options={options}
/>
)
export default Datatable
1条答案
按热度按时间dbf7pr2w1#
setData(response.data.items)
会覆写先前的数据,因此您只能在第一页看到数据。您可以将它变更为来修正这个问题。