React Material UI Data Grid onSelectionModelChange 与客户分页答案

【问题标题】：React Material UI Data Grid onSelectionModelChange with custome paginationReact Material UI Data Grid onSelectionModelChange 与客户分页
【发布时间】：2022-10-20 16:48:58
【问题描述】：

我在使用 DataGrid onSelectionModelChange prop 时遇到问题。我可以获取单个页面的当前选定行，但是当我使用custom 分页并移动到下一页并再次使用onSelectionModelChange 时，我失去了以前的selections。

function DataTable(props, list, count) {

  const [page, setPage] = React.useState(1)
  const [selectionModel, setSelectionModel] = React.useState([]);
  const prevSelectionModel = React.useRef(selectionModel);


  let history = useHistory();
  const columns = [#cols here]

  React.useEffect(() => {

    listView(page, newSearch);
   
  }, [page, newSearch]);

  const data = {
    columns: columns,
    rows: JSON.parse(localStorage.getItem("results"))
  }

  return (
    <div style={{ height: 600, width: '100%' }}>
      <DataGrid
        autoHeight
        rows={data.rows}
        columns={columns}
        hideFooterPagination={true}
        checkboxSelection
        onSelectionModelChange={(ids) => {
          setSelectionModel(ids);
          console.log(selectionModel)
        }}
        pageSize={10}
        rowsPerPageOptions={[10]}
        // {...data}
      />
      <AppPagination
      setPage={setPage}
      page={page}
      />
    </div>
  );
}


enter code here

【问题讨论】：

标签： javascript reactjs material-ui datagrid

【解决方案1】：

这是您的案例的一个工作示例：您可以在此沙箱中观看控制台...不会丢失选定的行

现场演示

【讨论】：

我丢失了选定的行，因为我使用了自定义分页，每个页面更改我都从服务器请求一个新列表，在 useEffect 中，所以这个重新呈现页面。
您可以使用 Redux OR 本地存储来持久选择行
请在您的答案中包含代码，它不应该依赖于外部链接。可能会删除依赖于外部链接的答案。

【解决方案2】：

道具keepNonExistentRowsSelected 适用于您的代码。更多信息见Mui data-grid docs和github issue

【讨论】：