reactjs - useEffect() 和 localStorage 显示两个选项的值

Question

我在一个网站上有两个标签。当用户单击选项卡时，它会变为活动状态('aria-selected', true)。当用户单击另一个选项卡时，该选项卡变为活动状态，而另一个选项卡变为非活动状态。我希望用户的选择在页面加载时保持不变（无论是初始加载还是刷新）。下面的代码显示"active"了页面加载时的两个选项卡 - 我可能做错了什么？

这是我的代码：

 //Select the relevant tab when the page loads:
  useEffect(() => {
    const tabs = document.querySelectorAll('[role="tab"]');
    const localStorageView = localStorage.getItem('view');
    if (localStorageView === 'default') {
      alert(localStorageView);
      tabs[0].setAttribute('aria-selected', false);
      tabs[1].setAttribute('aria-selected', true);
    } else if (localStorageView === 'myView') {
      alert(localStorageView);
      tabs[0].setAttribute('aria-selected', false);
      tabs[1].setAttribute('aria-selected', true);
    }
  });

标签： reactjslocal-storageuse-effect