反應：useState 在點擊時不保留更新的 state

Question

更新：我真的想在這里重新發明輪子，如果你將下面的代碼與 React 的 Link 或 NavLink 結合使用而不是錨標簽，它就可以工作，它具有內置的監聽功能，可以跟蹤你當前所在的頁面並在您的路線更改為不同的頁面時相應地傳遞更新的 state。感謝所有插話並指出我正確方向的人！

我對 React 仍然很陌生，尤其是使用鈎子，但我想要完成的是通過條件渲染和使用 useState 管理 state 來觸發我的導航欄元素的“活動”選項卡 class。 但是，當我在單擊時調用“setActiveTabIdx”時，我無法判斷它是否根本沒有更新 state，或者它是否在重新渲染時正在重置為默認值。 我試圖使用我的開發工具在點擊時進行監控，但它發生得太快了，我無法以一種或另一種方式說。 如果有人願意看一下，我在這一點上嘗試了很多不同的東西，謝謝！

const NavBar = () => {

  const [activeTabIdx, setActiveTabIdx] = useState(0)

  const navItems = ['About', 'Services', 'Oils', 'New Patients', 'Courses', 'Recommendations', 'Contact' ]

  const renderedItems = navItems.map((nav, idx) => {

    const active = idx === activeTabIdx ? 'active' : ''

    return (
    <a 
      onClick={() => setActiveTabIdx(idx)} 
      href={`${nav.split(' ').join('').toLowerCase()}`} 
      className={`${active} item`}
      key={idx}
      >{nav}</a>
    )
  })

  return (
    <div className="ui tabular menu">
      {renderedItems}
    </div>
  );
};

export default NavBar;

Answer 1

您正在嘗試更改 state （已完成），然后將用戶重定向到其他頁面（也已完成）。 state 在重定向后重置。

Answer 2

它似乎正在重置，我添加了這個塊來檢查：

const NavBar = () => {

  const [activeTabIdx, setActiveTabIdx] = useState(0)

  const navItems = ['About', 'Services', 'Oils', 'New Patients', 'Courses', 'Recommendations', 'Contact' ]
  
  // --------- Start block --------- 

  useEffect(() => {
      console.log(`current state: ${activeTabIdx}`);
  }, [activeTabIdx]);

  // --------- End block --------- 

  const renderedItems = navItems.map((nav, idx) => {

    const active = idx === activeTabIdx ? 'active' : ''

    return (
    <a 
      onClick={() => setActiveTabIdx(idx)} 
      href={`${nav.split(' ').join('').toLowerCase()}`} 
      className={`${active} item`}
      key={idx}
      >{nav}</a>
    )
  })

  return (
    <div className="ui tabular menu">
      {renderedItems}
    </div>
  );
};

export default NavBar;

並檢查代碼和框