reactjs - 警告：Material-UI：为 Tabs 组件提供的值“3”无效。所有 Tabs 子项都没有此值

Question

我正在使用 Material UI 选项卡和 Reactjs，两者在视觉上都可以正常工作，但是我在使用开发人员工具时意识到，每次单击我有 警告的最后一个选项卡时都会出现错误：Material-UI: the value provided `3` to选项卡组件无效。所有 Tabs 子项都没有此值。您可以提供以下值之一：0、1、2、3。 选项卡以动态方式生成，有一个数组位于：

const tabs = [
    {
      id: 0,
      title: 'Information',
      component: <EventContaint />
    },
    {
      id: 1,
      title: 'Attendees',
      component: 'Here attendees list',
      roles: { event: ['owner', 'organizer'] }
    },
    {
      id: 2,
      title: 'Committee',
      component: <EventCommittee />,
      roles: { event: ['owner'] }
    },
    {
      id: 3,
      title: 'Schedule',
      component: <Schedule />,
      roles: { event: ['owner', 'organizer'] }
    }
  ];

验证角色后，id 为 2 的选项卡不显示（没关系），但是当我单击“计划”选项卡时出现错误（一切正常，但我需要帮助来解决出现在控制台上的这个问题）

<Tabs
  value={value}
  onChange={handleChange}
  variant='scrollable'
  scrollButtons='on'
  indicatorColor='secondary'
  textColor='secondary'
>
  {tabs.map((tab, index) => (
    <TabWithRoles
      label={tab.title}
      {...a11yProps(index)}
      key={index}
      index={index}
      committee={committee}
      roles={tab.roles}
    />
  ))}
</Tabs>

value 和 handleChange 是这样的：

const [value, setValue] = React.useState(0);

const handleChange = (event, newValue) => {
  console.log('NEW_VALUE', newValue); // Schedules prints 3, but Committee is not rendered 
  setValue(newValue);
};

标签： reactjstabsmaterial-ui