时间戳

首页 > 解决方案 > 反应：useState 在点击时不保留更新的状态

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

问题描述

更新：我真的想在这里重新发明轮子，如果你将下面的代码与 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;

标签： javascriptreactjsreact-hooksuse-state

解决方案

它似乎正在重置，我添加了这个块来检查：

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;

并检查代码和框

推荐阅读