Javascript 反应：单击后useState不保留更新状态

更新：我真的想在这里重新发明轮子，下面的代码如果你将它与React的Link或NavLink结合使用，而不是锚定标签，那么它就会工作，它具有内置的监听功能，可以跟踪您当前所在的页面，并在您的路线更改到其他页面时相应地传递更新状态。感谢所有参与进来并为我指出正确方向的人

我对React仍然很熟悉，尤其是挂钩，但我试图通过条件呈现和使用useState管理状态来触发navbar元素的“活动”选项卡类。 但是，当我在单击时调用“setActiveTabIdx”时，我无法判断它是否根本没有更新状态，或者在重新渲染时是否正在重置为默认值。我试图使用我的开发工具来监控点击，但它发生得太快了，我说不出这种或那种方式。在这一点上，我已经尝试了很多不同的东西，如果有人愿意看的话，谢谢

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;

常量导航栏=（）=>{
常量[activeTabIdx，setActiveTabIdx]=useState（0）
const navItems=[“关于”、“服务”、“油”、“新患者”、“课程”、“推荐”、“联系”]
const renderItems=navItems.map（（导航，idx）=>{
const active=idx==activeTabIdx？“active”：”
返回(
)
})
返回(
{renderItems}
);
};
导出默认导航栏；

您正在尝试更改状态（已完成），然后将用户重定向到其他页面（已完成）。重定向后状态将重置。

似乎正在重置，我添加了此块以检查：

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;

const导航栏=（）=>{
常量[activeTabIdx，setActiveTabIdx]=useState（0）
const navItems=[“关于”、“服务”、“油”、“新患者”、“课程”、“推荐”、“联系”]
//------启动块------
useffect（（）=>{
log（`current state:${activeTabIdx}`）；
}，[activeTabIdx]）；
//------端块------
const renderItems=navItems.map（（导航，idx）=>{
const active=idx==activeTabIdx？“active”：”
返回(
)
})
返回(
{renderItems}
);
};
导出默认导航栏；

---

要检查

，您似乎正在将onClick与href结合使用；路由器将在onClick之后处理href更改，并在使用更新的路由状态重新呈现组件后有效地重置您的状态。如果可能的话，您应该将当前页面的初始状态设置为正确的值，并将页面转换设置为

useRouter

，而不是href。