当我在react中从第1页转到第2页时，MUI数据表单元格不反映API响应数据

Question

假设我有一个父组件，其中有一个子组件，它是一个 MUI 数据表。该子组件从父组件接收 API 响应数据作为 props。

问题 表上的数据在页面加载时完美加载，但是当我使用 MUI 数据表分页从页面 1 移动到页面 2 时，该分页将页码传递给父组件，并且在父组件中，API 函数在 useEffect() 挂钩内调用，该函数在以下情况下被调用收到此数据。我能够在子组件分页期间记录 API 响应数据，但这些数据不会加载到表格单元格中

我厌倦了在子组件上使用 State() 挂钩来设置数据，但这没有帮助

MUI数据表： 第 1 页（共 3 页）

Answer 1

设置您的 pageSize={} 例如 pageSize={10} 那么所有数据将显示在 10 行中，或者您可能在一个表中调用所有数据。

     <DataGrid
          rows={state}
          columns={columnsFields}
          pageSize={20}
          rowsPerPageOptions={[5]}
          checkboxSelection
          disableSelectionOnClick
          getRowId={(row) => row._id}
        />

Answer 2

我遇到了同样的问题，修复方法只是添加

paginationMode =“服务器”

  const [paginationModel, setPaginationModel] = useState({
     page: 0,
     pageSize: PAGE_SIZE,
  });

 <DataGrid
      columns={columnsFields}
      rows={state}
      rowCount={rowCountState} - //total no. of rows/dataCount
      paginationMode="server"
      initialState={{
        pagination: { paginationModel },
      }}
      pageSizeOptions={[PAGE_SIZE]}
      onPaginationModelChange={setPaginationModel}
    />