Javascript 在 onRowSelectionChange 中设置状态时如何防止 mui 数据表呈现

发布于08月29日

我目前正在与"mui-datatables": "^4.2.2"react js项目.

我有一个分页的数据列表，可以通过复选框 Select 一个项目:

我的问题是:

当我在第二页中 Select 一项时，组件会重新呈现并自动返回到第一页.

我认为问题出在onRowSelectionChange内部的设置状态:

  const options = {
    filter: false,
    onRowClick: (rowData, rowMeta) => {
      console.log("--rowData --");
      console.log(rowData);
      console.log("--rowMeta --");
      console.log(rowMeta);
    },
    onRowSelectionChange: (
      currentRowsSelected,
      allRowsSelected,
      rowsSelected
    ) => {
      let items = [];
      allRowsSelected.forEach((row) => {
        items.push(data[row.dataIndex]);
      });
      setSelectedRows(items);
    },

我如何解决这个问题？

推荐答案

例如，您也应该将页码存储在州中 curPage:1个当页面更改时，您也应该更新curPage，现在您可以在传递给mui-datatable的选项props 中使用它.

const options = {
page:this.state.curPage,//incase its class component
onChangePage:(page)=>{
 this.setState({curPage:page});//assuming its a class component
},
filter: false,
onRowClick: (rowData, rowMeta) => {
  console.log("--rowData --");
  console.log(rowData);
  console.log("--rowMeta --");
  console.log(rowMeta);
},
onRowSelectionChange: (
  currentRowsSelected,
  allRowsSelected,
  rowsSelected
) => {
  let items = [];
  allRowsSelected.forEach((row) => {
    items.push(data[row.dataIndex]);
  });
  setSelectedRows(items);
},

希望这能有所帮助