React用useEffect与localStorage实现标签选中持久化的双激活问题

• 分支判断逻辑完全冗余错位：两个条件分支下的属性操作毫无区别，无论本地存储读到的view值是default还是myView，代码都执行「将第一个标签设为非激活、第二个标签设为激活」的操作，完全没有根据存储值匹配对应的激活标签，和持久化选择的预期逻辑完全不符。
• 缺少全局状态重置逻辑：代码仅在命中if/else分支时针对性修改标签属性，没有先把所有标签统一重置为非激活状态。如果页面加载时DOM自带某一个标签的默认激活属性、或是残留了之前会话的激活标记，一旦本地存储没有读到有效view值（比如首次进入无存储记录的场景），if/else分支都不会触发，原有激活态会和组件渲染逻辑产生冲突，直接出现两个标签同时处于激活态的异常。就算命中分支，没有先清掉所有标签的旧激活态，也很容易出现「旧激活态没清除、新激活态又被添加」的情况。
• useEffect未配置依赖数组：当前写法等价于组件每一次重新渲染都会执行一遍标签状态修改逻辑，很容易和标签组件自带的渲染逻辑、标签点击的事件逻辑产生时序竞争，比如组件刚把某个标签标记为激活，useEffect又直接修改另一个标签的属性，最后残留两个激活态的DOM标记。
• 缺少无存储值时的兜底逻辑：当本地存储没有有效view记录时，代码没有明确指定默认激活的标签，完全依赖DOM初始状态，很容易因为初始状态不统一触发异常。

核心修正思路：先全量重置所有标签状态，再根据存储值匹配激活项，同时添加兜底逻辑、配置effect执行时机

useEffect(() => {
  const tabs = document.querySelectorAll('[role="tab"]');
  const savedView = localStorage.getItem('view');
  // 全量重置所有标签为非激活，清除残留的旧状态
  tabs.forEach(tab => tab.setAttribute('aria-selected', 'false'));

  // 根据存储值匹配对应激活标签
  if (savedView === 'default') {
    tabs[0].setAttribute('aria-selected', 'true');
  } else if (savedView === 'myView') {
    tabs[1].setAttribute('aria-selected', 'true');
  } else {
    // 首次加载无存储记录时，兜底激活第一个标签
    tabs[0].setAttribute('aria-selected', 'true');
  }
}, []); // 空依赖数组保证逻辑仅在页面首次加载时执行一次

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