如何在Material UI中通过数组映射生成Tabs与对应TabPanel组件

你的代码存在3处核心错误，按如下步骤修改即可正常运行：

错误点说明 #

• 给<Tab>组件传了错误的属性名：MUI的<Tab>用来匹配<Tabs>选中值的属性是value，不是你写的index，这导致onChange返回的newValue是Tab默认的顺序下标（0、1），和你自定义的1、2完全不匹配
• 映射生成<TabPanel>时把index属性写死成了1，所有面板共用同一个匹配索引，无法对应不同Tab
• 初始状态的value赋值为false，和索引的数字类型不匹配，导致所有面板永远满足value !== index的隐藏条件，没有内容渲染

具体修改代码 #

1. 修正Tab的属性 #

把Tab部分的index={item.index}改成value={item.index}：

{tab_item.map((item) => (
  <Tab
    wrapped
    key={item.index}
    value={item.index} // 这里原来写的是index，改成value
    label={item.label}
    onClick={() => (clean_notes_push(item))}
  />
))}

2. 修正TabPanel的index属性 #

不要写死1，改成对应数组项的index：

{tab_item.map((item) => (
  <TabPanel
    key={item.index}
    value={value}
    index={item.index} // 这里原来写死了1，改成动态值
  >
    {item.tabPanel_comp}
  </TabPanel>
))}

3. 修正初始状态的value值 #

改成第一个Tab对应的索引值1：

const [value, setValue] = React.useState(1); // 原来的值是false，改成1

可选优化方案 #

如果你不需要自定义1、2的索引值，也可以直接用数组映射的下标作为索引，省去自定义index字段的冗余：

1. 删除tab_item里的index字段
2. 映射时用map的第二个参数作为索引：

// Tab部分
{tab_item.map((item, index) => (
  <Tab
    wrapped
    key={index}
    value={index}
    label={item.label}
    onClick={() => (clean_notes_push(item))}
  />
))}

// TabPanel部分
{tab_item.map((item, index) => (
  <TabPanel
    key={index}
    value={value}
    index={index}
  >
    {item.tabPanel_comp}
  </TabPanel>
))}

// 初始值设为0
const [value, setValue] = React.useState(0);

内容的提问来源于stack exchange，提问作者AlcoholAllergy