用页面反应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 (将#修改为@）