如何让useEffect响应localStorage中benchmarkActiveTab值的变化？

问题根源 #

你的代码中activeTab仅在组件初始化时从localStorage读取一次值，后续localStorage中的benchmarkActiveTab发生变化时，activeTab状态不会自动同步更新，导致useEffect的依赖项没有变化，因此不会触发执行。

解决方案 #

要实现localStorage变化时触发useEffect，需要保证activeTab状态与localStorage保持同步，可通过以下两种方式处理：

1. 监听storage事件（处理跨页面修改localStorage的场景）

浏览器提供了storage事件，当同源其他页面修改localStorage时会触发该事件，我们可以通过它来更新activeTab状态：

const [activeTab, setActiveTab] = useState(
  localStorage.getItem("benchmarkActiveTab") || 0
);

useEffect(() => {
  async function getBenchmarkTimes() {
    // 这里编写你的业务逻辑
    console.log("执行getBenchmarkTimes，当前activeTab：", activeTab);
  }
  getBenchmarkTimes();

  // 监听storage变化
  const handleStorageChange = (e) => {
    if (e.key === "benchmarkActiveTab") {
      setActiveTab(e.newValue || 0);
    }
  };

  window.addEventListener("storage", handleStorageChange);

  // 组件卸载时移除监听
  return () => {
    window.removeEventListener("storage", handleStorageChange);
  };
}, [activeTab]);

2. 封装同步更新函数（处理当前页面修改localStorage的场景）

如果是在当前页面内修改localStorage，storage事件不会触发，此时需要封装一个同时更新localStorage和状态的函数：

const [activeTab, setActiveTab] = useState(
  localStorage.getItem("benchmarkActiveTab") || 0
);

// 封装同步更新函数
const updateBenchmarkTab = (newValue) => {
  localStorage.setItem("benchmarkActiveTab", newValue);
  setActiveTab(newValue);
};

useEffect(() => {
  async function getBenchmarkTimes() {
    // 业务逻辑
    console.log("执行getBenchmarkTimes，当前activeTab：", activeTab);
  }
  getBenchmarkTimes();
}, [activeTab]);

// 调用示例：比如点击按钮时更新
// <button onClick={() => updateBenchmarkTab("1")}>切换标签</button>

关键说明 #

只有当activeTab状态发生变化时，useEffect才会触发。核心是确保localStorage的修改能同步到activeTab状态，这样依赖项变化后，useEffect就会执行对应的逻辑。

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