javascript - MUI : The `value` provided to the Tabs component is invalid. 带有此 `value` ("0"的选项卡不是文档布局的一部分

Question

我正在使用 MUI 选项卡，但出现以下错误:
梅:value提供给选项卡组件是无效的。
带有此 value 的选项卡("0") 不是文档布局的一部分。
确保选项卡项目存在于文档中，或者它不是 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>
    );
}

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