从路由器 nextjs 设置活动的 tabpanel mui

Question

我正在尝试使用路由器 pid 设置活动选项卡

方法如下

function dashboard({ tabId }) {

    const classes = useStyles();

    const [value, setValue] = React.useState(""); 

    useEffect(() => {
        console.log(tabId)
        if (tabId) {
            setValue(tabId);
        }

    }, [])
 
.......
}

我的每个 TabPanel 都有一个自定义值，我试图作为路由器参数 (pid) 传递的值如何相同

pid通过getInitialProps获取

dashboard.getInitialProps = async ({ query }) => {
    if (!query.pid) {
        return { tabId: 0 }
    }
    return { tabId: query.pid }
}

所以问题是，选项卡设置为活动但选项卡的内容未显示...只有选项卡设置为活动...

Tabs/TabPanel

<Tabs value={value} 
                            onChange={handleChange} 
                            initialSelectedIndex={1}
                            variant="fullWidth" 
                            aria-label="simple tabs example"
                            TabIndicatorProps={{
                                style: {
                                    display:'none',
                                }
                            }}
                            >
                        <Tab label="ACCUEIL" value="accueil" classes={{ root: classes.rootTab, selected: classes.selectedTab }} {...a11yProps(0)} />
                        <Tab label="GÉRER SA GAMME" value="ma-gamme" classes={{ root: classes.rootTab, selected: classes.selectedTab }} {...a11yProps(1)} />
                     .........
                        </Tabs>
                    </AppBar >

                    <TabPanel value="accueil" index={0}>

                    

                    </TabPanel>




                    <TabPanel value="ma-gamme" index={1}>

                    </TabPanel>
     ......

function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`simple-tabpanel-${index}`}
        aria-labelledby={`simple-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Container>
          <Box p={3}>
            {children}
          </Box>
          </Container>
        )}
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  };
  


  function a11yProps(index) {
    return {
      id: `simple-tab-${index}`,
      'aria-controls': `simple-tabpanel-${index}`,
    };
  }

任何帮助将不胜感激:)

由 juliomalves 修复

我使用的是字符串值而不是 value={index}

Answer 1

由 juliomalves 修复

我使用的是字符串值而不是值={index}

从路由器 nextjs 设置活动的 tabpanel mui

Set active tabpanel mui from router nextjs

javascript

tabs

material-ui

next.js