MUI：提供给选项卡组件的“值”无效。具有此“值”（“0”）的选项卡不是文档布局的一部分

Question

我正在使用 MUI 选项卡，但遇到以下错误：

MUI：value提供给选项卡组件的内容无效。带有此（“0”）的选项卡value不是文档布局的一部分。确保该选项卡项目存在于文档中或不存在display: none。

该代码与 MUI 示例非常相似，它们也产生了同样的问题

https://mui.com/material-ui/react-tabs/

Answer 1

我找到了一个解决方案，也许不是最好的，但它有效

我理解问题是选项卡组件尝试在其子选项卡存在之前加载它们。所以我们的想法是使用 setTimeout 在它们的生成中引入延迟：

import * as React from 'react';
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Typography from '@mui/material/Typography';

function TabPanel(props) {
    const { children, value, index} = props;

    return (
        value === index && (
                <Typography>{children}</Typography>
        )
    );
}

export default function BasicTabs() {
    const [value, setValue] = React.useState(0);
    const [activateTab, setActivateTab] = React.useState(false);

    setTimeout(()=>{
        setActivateTab(true)
    },100)

    const tabsArr=[
        {
            label:"Item One",
            key: `simple-tab-0`,
        },
        {
            label:"Item Two",
            key: `simple-tab-1`,
        }
    ]

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

    return (
        <Box sx={{ width: '100%' }}>
            <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                <Tabs value = {value} onChange = {handleChange}>
                    {activateTab && (
                            tabsArr.map((item)=>(
                                <Tab {...item} />
                            ))
                        )
                    }
                </Tabs>
            </Box>
            <TabPanel value={value} index={0}>Item One</TabPanel>
            <TabPanel value={value} index={1}>Item Two</TabPanel>
        </Box>
    );
}

如果不行的话可以尝试增加延迟