javascript - HeadlessUI Tabs 活动选项卡在刷新后恢复为 0

Question

我非常需要有关 headlessUI 选项卡的帮助。我试图自己修复它并进行研究，但没有足够的资源来解决我的问题。我仍然不明白这是怎么回事，我也阅读了文档。

import { useEffect, useState } from "react";
import { Tab } from "@headlessui/react";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default function Tabs({ tabs }) {
  const [index, setIndex] = useState();

  return (
    <Tab.Group
      defaultIndex={index}
      onChange={(index) => {
        console.log("Changed selected tab to:", index);
        setIndex(index);
      }}
    >
      <Tab.List className="text-xl space-x-9">
        {tabs.map(({ tab }, index) => (
          <Tab
            key={index}
            className={({ selected }) =>
              classNames(
                selected ? "text-gray-900" : "text-gray-400 font-avenir-roman"
              )
            }
          >
            {tab}
          </Tab>
        ))}
      </Tab.List>
      <Tab.Panels>
        {tabs.map(({ content }, index) => (
          <Tab.Panel key={index}>{content}</Tab.Panel>
        ))}
      </Tab.Panels>
    </Tab.Group>
  );
}