next.js MUIDataTable服务器端分页-“没有匹配的记录存在”-当我移动到下一页时,即使数据在网络选项卡上返回

gfttwv5a  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(107)

我在下一个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
dbf7pr2w

dbf7pr2w1#

setData(response.data.items)会覆写先前的数据,因此您只能在第一页看到数据。您可以将它变更为来修正这个问题。

setData(prevData => [...prevData, ...response.data.items]);

相关问题