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

【问题标题】：React: useState not preserving updated state upon click反应：useState 在点击时不保留更新的状态
【发布时间】：2021-04-09 21:35:06
【问题描述】：

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

【问题讨论】：

看来您正在结合使用 onClick 和 href；路由器将在 onClick 之后处理 href 更改，并在使用更新的路由状态重新渲染组件后有效地重置您的状态。您应该将初始状态设置为当前页面的正确值，并为页面转换设置useRouter，而不是href，如果可能的话。

标签： javascript reactjs react-hooks use-state

【解决方案1】：

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

【讨论】：

【解决方案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

【讨论】：