Reactjs 当我使用.map动态填充内容而不是硬编码时，为什么材质UI选项卡停止工作？

我已经通过硬编码内容成功地实现了Material UI的选项卡，但是当我尝试使用.map函数创建一个我的硬编码选项卡来从数据源（简单json）填充内容时，它不再起作用。有人知道为什么吗？我所做的唯一更改是下面的MyTabs组件，其中现在有两个.map函数，而不是硬编码的选项卡

非常感谢你的帮助

以下是我的数据：

export const TabsData = [
  {
    tabTitle: 'Tab 1',
    tabContent: 'Hello 1',
  },
  {
    tabTitle: 'Tab 2',
    tabContent: 'Hello 2',
  },
  {
    tabTitle: 'Tab 3',
    tabContent: 'Hello 3',
  },
];

这是我的MyTabs组件：

import React, { useState } from 'react';

// Material UI
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

// Data
import { TabsData } from '../../page-templates/full-page-with-tabs/FullPageWithTabsData';

//Components
import TabContentPanel from '../tabs/tab-content-panel/TabContentPanel';

const MyTabs = () => {
  const classes = useStyles();
  const initialTabIndex = 0;
  const [value, setValue] = useState(initialTabIndex);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <>
     <Tabs
       value={value}
       onChange={handleChange}
       aria-label=""
       className={classes.tabHeight}
       classes={{ indicator: classes.indicator }}
     >
      {TabsData.map((tabInfo, index) => (
        <>
         <Tab
            label={tabInfo.tabTitle}
            id={`simple-tab-${index}`}
            ariaControls={`simple-tabpanel-${index}`}
         />
        </>
       ))}
    </Tabs>
    {TabsData.map((tabInfo, index) => (
        <TabContentPanel value={value} index={index}>
           {tabInfo.tabContent}
        </TabContentPanel>
    ))}
    </>
  );
};

export default MyTabs;

import React from 'react';
import PropTypes from 'prop-types';

// Material UI
import { Box } from '@material-ui/core';

function TabContentPanel(props) {
  const { children, value, index, ...other } = props;
  const classes = useStyles();
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && <Box className={classes.contentContainer}>{children}</Box>}
    </div>
  );
}

TabContentPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

export default TabContentPanel;

import React，{useState}来自“React”；
//材料界面
从“@material ui/core/Tabs”导入选项卡；
从“@material ui/core/Tab”导入选项卡；
//资料
从“../../page templates/full page with tabs/FullPageWithTabsData”导入{TabsData}；
//组成部分
从“../tabs/tab content panel/TabContentPanel”导入TabContentPanel；
常量MyTabs=（）=>{
const classes=useStyles（）；
常量initialTabIndex=0；
const[value，setValue]=useState（initialTabIndex）；
常量handleChange=（事件，newValue）=>{
设置值（新值）；
};
返回(
{TabsData.map（（tabInfo，index）=>(
))}
{TabsData.map（（tabInfo，index）=>(
{tabInfo.tabContent}
))}
);
};
导出默认的MyTabs；

这是TabsPanel组件：

import React, { useState } from 'react';

// Material UI
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';

// Data
import { TabsData } from '../../page-templates/full-page-with-tabs/FullPageWithTabsData';

//Components
import TabContentPanel from '../tabs/tab-content-panel/TabContentPanel';

const MyTabs = () => {
  const classes = useStyles();
  const initialTabIndex = 0;
  const [value, setValue] = useState(initialTabIndex);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  return (
    <>
     <Tabs
       value={value}
       onChange={handleChange}
       aria-label=""
       className={classes.tabHeight}
       classes={{ indicator: classes.indicator }}
     >
      {TabsData.map((tabInfo, index) => (
        <>
         <Tab
            label={tabInfo.tabTitle}
            id={`simple-tab-${index}`}
            ariaControls={`simple-tabpanel-${index}`}
         />
        </>
       ))}
    </Tabs>
    {TabsData.map((tabInfo, index) => (
        <TabContentPanel value={value} index={index}>
           {tabInfo.tabContent}
        </TabContentPanel>
    ))}
    </>
  );
};

export default MyTabs;

import React from 'react';
import PropTypes from 'prop-types';

// Material UI
import { Box } from '@material-ui/core';

function TabContentPanel(props) {
  const { children, value, index, ...other } = props;
  const classes = useStyles();
  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && <Box className={classes.contentContainer}>{children}</Box>}
    </div>
  );
}

TabContentPanel.propTypes = {
  children: PropTypes.node,
  index: PropTypes.any.isRequired,
  value: PropTypes.any.isRequired,
};

export default TabContentPanel;

从“React”导入React；
从“道具类型”导入道具类型；
//材料界面
从'@material ui/core'导入{Box}；
功能选项卡ContentPanel（道具）{
const{children，value，index，…other}=props；
const classes=useStyles（）；
返回(
{value==索引&&{children}
);
}
TabContentPanel.propTypes={
子项：PropTypes.node，
索引：PropTypes.any.isRequired，
值：PropTypes.any.isRequired，
};
导出默认选项卡ContentPanel；

它不起作用，因为您在

选项卡

组件中添加了一些额外的

片段（
和
），并且
选项卡
组件不接受
片段
：

如果删除这些，它将按预期工作：

{TabsData.map((tabInfo, index) => (
  <Tab
    label={tabInfo.tabTitle}
    id={`simple-tab-${index}`}
    key={tabInfo.tabTitle}
    ariaControls={`simple-tabpanel-${index}`}
  />
))}

{TabsData.map（（tabInfo，index）=>(
))}

如果创建元素数组，请使用具有唯一id的
键
 它不起作用，因为您在
选项卡
组件中添加了一些额外的
片段（
和
），并且
选项卡
组件不接受作为子项的
片段
：

如果删除这些，它将按预期工作：

{TabsData.map((tabInfo, index) => (
  <Tab
    label={tabInfo.tabTitle}
    id={`simple-tab-${index}`}
    key={tabInfo.tabTitle}
    ariaControls={`simple-tabpanel-${index}`}
  />
))}

{TabsData.map（（tabInfo，index）=>(
))}

如果创建元素数组，请使用具有唯一id的
键
 哇！这是完美的工作了！非常感谢您的帮助，并为您提供了包括钥匙在内的额外建议。非常感谢您，并为我节省了大量的时间，让我不必费心去想办法解决这个问题！：）哇！这是完美的工作了！非常感谢您的帮助，并为您提供了包括钥匙在内的额外建议。非常感谢您，并为我节省了大量的时间，让我不必费心去想办法解决这个问题！：）