Question

更新：我真的想在这里重新发明轮子，如果您将下面的代码与 React 的 Link 或 NavLink 结合使用而不是锚标签，它就可以工作，它具有内置的侦听功能，可以跟踪您的页面当前处于开启状态，并在您的路线更改到不同页面时相应地传递更新的状态。感谢所有插话并指出我正确方向的人！

我对 React 仍然很陌生，尤其是使用钩子，但我想要完成的是通过条件渲染和使用 useState 管理状态来触发我的导航栏元素的“活动”选项卡类。但是，当我在单击时调用“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;

Answer 1

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

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;

并检查codesandbox

反应：useState 在点击时不保留更新的状态

2 个答案: