HeadlessUI Tabs刷新后激活标签自动重置为0的问题求解

核心问题根因 #

• 你目前使用的 defaultIndex 是 HeadlessUI 的非受控属性，仅在组件首次挂载时生效，后续修改绑定的变量不会更新组件的激活状态。同时你初始化 useState 时没有传默认值，首次渲染时 defaultIndex 为 undefined，组件会自动 fallback 到第0位标签。
• 标签选中状态仅存在于 React 内存状态中，没有做持久化存储，页面刷新后状态会被完全重置。

修复代码 #

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

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

// 可自定义storageKey，避免同一页面多Tabs实例存储冲突
export default function Tabs({ tabs, storageKey = "active-tab-index" }) {
  // 初始化时从本地存储读历史选中索引，无记录默认返回0
  const [index, setIndex] = useState(() => {
    const savedIndex = localStorage.getItem(storageKey);
    return savedIndex ? Number(savedIndex) : 0;
  });

  return (
    <Tab.Group
      // 替换为受控属性selectedIndex，让组件状态完全受本地state控制
      selectedIndex={index}
      onChange={(newIndex) => {
        console.log("Changed selected tab to:", newIndex);
        setIndex(newIndex);
        // 切换标签时同步存储索引到本地
        localStorage.setItem(storageKey, newIndex);
      }}
    >
      <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>
  );
}

额外说明 #

• 如果不需要跨会话保留选中状态，可将 localStorage 替换为 sessionStorage，关闭标签页后存储记录会自动清除。
• 同一页面复用该Tabs组件时，传入不同的storageKey即可避免存储冲突，例如 <Tabs tabs={userTabs} storageKey="user-center-tab" />。

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