javascript - 材料表详细信息面板不会在状态更改时重新渲染

Question

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

从这个例子可以看出，当你点击 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>
              )
            }
        />
    )
}

任何帮助是极大的赞赏！

标签： javascriptreactjsmaterial-uimaterial-table