材料表详细信息面板不会在状态更改时重新呈现

如何解决材料表详细信息面板不会在状态更改时重新呈现

当 Material-UI 选项卡组件的选项卡选择发生更改时，我在重新渲染材质表的详细信息面板时遇到问题。我期望发生的是，当我选择选项卡列表中的第二个选项卡时，样式和组件应该重新渲染以在 DOM 中反映出来。截至目前，这并没有发生。 value 属性正在更新，但 DOM 永远不会从值更改中重新呈现。我传递给 handleChange 函数的 value 属性是一个索引。所以对于 3 个标签，会有 3 个不同的值 (0,1,2)

您可以从这个 example 中看到，当您单击 AppBar 中的后续选项卡时，状态会自动更新和更改。我可以通过单击不同的选项卡有效地更改“值”属性，但永远不会重新呈现详细信息面板，并且始终选择第一个选项卡。

这个 PR 有一个类似的问题，但我无法得到任何满足我需要的答案。

import AppBar from '@material-ui/core/AppBar'
import Tabs from '@material-ui/core/Tabs'
import Tab from '@material-ui/core/Tab'

function TableComponent(props) {
    const [value,setValue] = React.useState(0)

    const handleChange = (event,newValue) => {
        setValue(newValue)
    }

    function getVersionsTabs (rowData) {
        const versions = Object.keys(rowData.versions)
        var versionList = versions.map(function (name,index) {
            const version = rowData.versions[name]
            return <Tab key={index} label={version.versionAlias} />
         })
        return versionList
    }
    return (
        <MaterialTable
            ...otherProps
            detailPanel={
            rowData => {
              return (
                <div>
                  <AppBar position='static' color='default'>
                    <Tabs value={value} onChange={handleChange} indicatorColor='primary' textColor='primary'>
                      {getVersionsTabs(rowData)}
                    </Tabs>
                  </AppBar>
                </div>
              )
            }
        />
    )
}

非常感谢任何帮助！