当我单击自定义列呈现中的按钮时，React material table 丢失其排序状态（任何状态更新都会导致此问题）

Question

这是我的代码。单击图标按钮时，我有可折叠列表。当我预先对 table 进行排序，然后单击按钮展开列表时，table 会进入未排序状态（先前的顺序）。不知道为什么。

<MaterialTable
            columns={[
              { title: "Jenkins Master", field: "organization" },
              { title: "Status", field: "status" },
              {
                field:'admins',
                title:'admins',
                render:rowData=><>
                <ListItem style={{paddingBottom:0}}>
                  <ListItemText style={{fontSize:"small",paddingBottom:0}}>{rowData.admins[0]}</ListItemText>
                  {this.getState(rowData.organization) ? <IconButton style={{padding:5}} onClick={()=>this.handleAdminExpand(rowData.organization)}><ExpandLess /></IconButton> : <><Chip label={"+"+(rowData.admins.length-1)}/><IconButton style={{padding:5}} onClick={()=>this.handleAdminExpand(rowData.organization)}><ExpandMore /></IconButton></>}
                  </ListItem>
                  <Collapse in={this.getState(rowData.organization)} timeout="auto" unmountOnExit><List style={{paddingLeft:10,paddingBottom:0,paddingTop:0}}>{rowData.admins.slice(1,rowData.admins.length).map((item)=>
                  <ListItem key={item} style={{padding:4}}>{item}</ListItem>)}
                  </List></Collapse></>
              },
              { title: "Used storage", field: "usedStorage" }
            ]}

这是我的处理程序方法。

    handleAdminExpand(name){
  this.state.openRows.find(openRow => openRow ===name ) ? 
  this.setState({
    openRows: this.state.openRows.filter(openRow => openRow!==name)
  })
   :
  this.setState({
    openRows: this.state.openRows.concat([name])
  })
};

非常感谢对此的任何评论。

Answer 1

这里的问题是 material table。如果我更新任何一种状态，table 的排序状态就会丢失。所以我将管理列代码和状态移动到单独的组件中。这解决了这个问题。这只是一种解决方法。问题仍然存在于 react material-table

Answer 2

npm i @material-table/core

并以此更改您的组件

import MaterialTable from '@material-table/core';

真的很管用！

当我单击自定义列呈现中的按钮时，React material table 丢失其排序状态（任何状态更新都会导致此问题）

React material table losing its sorted state when i click a button in custom column rendering (any state update will cause this issue)

web

reactjs

material-ui

material-table