当我在自定义列渲染中单击按钮时，React材质表将丢失其排序状态任何状态更新都将导致此问题

问题描述

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

<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])
  })
};

对此表示任何赞赏。

解决方法

这里的问题是物料表。如果我更新任何一种状态，表的排序状态都会丢失。因此，我将管理列代码和状态移至单独的组件。这解决了问题。这只是一个解决方法。问题仍然存在于反应物料表中

,

npm i @material-table/core

并用它来改变你的组件

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

确实有效！