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

【问题标题】：MUI: The `value` provided to the Tabs component is invalid. The Tab with this `value` ("0") is not part of the document layoutMUI：提供给选项卡组件的“值”无效。具有此“值”（“0”）的选项卡不是文档布局的一部分
【发布时间】：2022-06-17 20:05:57
【问题描述】：

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

MUI：提供给选项卡组件的value 无效。带有此value ("0") 的选项卡不是文档布局的一部分。确保标签项存在于文档中，或者它不是display: none。

代码与同样产生同样问题的 MUI 示例非常相似

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

【问题讨论】：

标签： javascript reactjs material-ui tabs

【解决方案1】：

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

我理解问题在于 Tabs 组件会在其子 Tab 存在之前尝试加载它们。所以我们的想法是使用 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>
    );
}

【讨论】：