Tabs 如何在NextJS中创建选项卡

我想为类别创建选项卡。我使用graphql获取数据类别，并希望按所选类别显示列表数据

选项卡类别

function a11yProps(index) {
  console.log(index);
  return {
    id: `simple-tab-${index}`,
    "aria-controls": `simple-tabpanel-${index}`,
  };
}
.....
const [value, setValue] = useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
......
{data.categories.map((category, i) => (
            <Tab
              key={category.id}
              label={category.name}
              id={`scrollable-prevent-tab-${category.id}`}
              aria-controls={`scrollable-prevent-tabpanel-${category.id}`}
              {...a11yProps(category.id)}
            />
          ))}
<ItemNews value={value} index={a11yProps()} />

---

您面临的问题到底是什么？我的问题是我无法获取详细id类别，即使所有id类别都已获得查询无误，我的问题是当获取id类别@xadman时是否要使用ItemNews呈现选项卡内容。。。把它放在地图里面？如果在地图里面，ItemNews也循环@xadman你到底面临什么问题？我的问题是我无法获取详细id类别，即使所有id类别都获得了查询没有错误，我的问题是当获取id类别@xadman你想用ItemNews呈现选项卡内容吗。。。把它放在地图里面？如果在地图里面，ItemNews循环也@xadm

const { value, index } = props;
const { loading, error, data, refetch } = detailCategory({
    variables: {
      id: index,
    },
  });