如何解决用页面反应MUIDataTable问题
我正在用graphQL查询填充mui-datatable。我将所有变量State作为变量参数发送。除了分页,其他一切都正常,分页最多增加2,然后总是返回1。这里的想法是,当用户更改页面时,我修改了触发graphQL查询的状态变量,但是由于某种原因,它不会t将分页值增加2倍以上。知道为什么吗?
import React,{ useState } from "react";
import MUIDataTable from "mui-datatables";
import { useQuery } from '@apollo/client';
const getTreeTypeQuery = gql`
query ($page: Int) {
getTreeType (page: $page){
rows {
Name
Type
}
totalCount
}
}
`;
export default function TableDisplayData( props ) {
const { title,columns,query,field } = props;
const [ state,setState ] = useState({
page: 0,orderColName: props.sortColumn.col,orderDirection: props.sortColumn.direction
});
const { loading,error,data } = useQuery(
query,{
variables: state,fetchPolicy: "cache-and-network"
}
);
if (loading) return "Loading...";
const totalCount = data[field].totalCount;
const dataTableOptions = {
rowsPerPage: 15,page: state.currentPage,useDisplayedColumnsOnly: true,filterType: "dropdown",rowsPerPageOptions: [15,25,30],count: totalCount,serverSide: true,sort: true,jumpToPage: true,sortOrder: {
name: state.orderColName,direction: state.orderColDirection
},onChangePage: (newPage) => {
setState({...state,page: newPage
});
}
};
return (
<>
<MUIDataTable
title={title}
data={dataFunction(data.rows)}
columns={columns}
options={dataTableOptions}
/>
</>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。