React状态未更新：仅首次点击后才更新的问题排查

问题根源 #

你遇到的问题核心在于：点击NavLink后，React Router会立刻触发页面跳转，而React的状态更新是异步的——状态还没来得及更新，页面就已经跳转了，导致组件可能被卸载或重新渲染，之前的状态更新操作被打断。另外，依赖点击事件同步状态的方式本身就不可靠，如果用户通过浏览器前进/后退按钮跳转，点击事件不会触发，状态也不会同步。

解决方案 #

正确的做法是监听路由变化，通过当前路径自动更新pageTitle，而不是依赖点击事件。利用react-router-dom提供的useLocation钩子就能实现：

修改后的代码 #

import React, { useEffect, useState } from "react";
import { NavLink, useLocation } from "react-router-dom";

function Navigation() {
  const [pageTitle, setPageTitle] = useState("about");
  const location = useLocation(); // 获取当前路由信息

  useEffect(() => {
    // 根据当前路径设置对应的标题
    switch(location.pathname) {
      case "/portfolio":
        setPageTitle("portfolio");
        break;
      case "/":
      default:
        setPageTitle("about");
        break;
    }
  }, [location.pathname]); // 监听路径变化

  return (
    <div>
      <section className="flex justify-center mt-36">
        <ul className="flex gap-4">
          <NavLink to="/">
            <span className="group transition duration-300">
              about
              <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600"></span>
            </span>
          </NavLink>
          <NavLink to="/portfolio">
            <span className="group transition duration-300">
              portfolio
              <span className="block max-w-0 group-hover:max-w-full transition-all duration-500 h-0.5 bg-sky-600"></span>
            </span>
          </NavLink>
        </ul>
      </section>
      <section>
          <span className="flex-shrink mx-4 text-gray-400">{pageTitle}</span>
      </section>
    </div>
  );
}

关键改动说明 #

1. 引入useLocation获取当前路由的路径信息
2. 用useEffect监听location.pathname的变化，每次路径切换时自动更新pageTitle
3. 移除了NavLink上的onClick事件，不再依赖点击操作同步状态

这种方式不仅能解决你当前的点击后状态不更新问题，还能兼容浏览器前进/后退等其他路由跳转场景，保证状态和路由始终同步。

内容的提问来源于stack exchange，提问作者Yusuf Karakaya