Gatsby中URL参数变化时如何正确初始化React State？

原代码的核心问题 #

1. 事件绑定错误：按钮的on_click是错误写法，React中标准事件属性为onClick，这个错误会导致点击按钮完全无响应，让你误以为State没更新。
2. 闭包导致的State更新异常：increment和decrement函数直接依赖page变量，组件重新渲染后，函数可能捕获到旧的page值，导致更新逻辑不符合预期。
3. 错误掩盖了重置逻辑：虽然useEffect监听location.href的逻辑是对的，但前面的事件绑定错误会让你看不到URL变化时setPage(1)的生效效果。

修正后的代码 #

import { useLocation } from "@reach/router";
import React, { useEffect, useState } from "react";

const AreaInfoPannel = ({ className, documentList }) => {
  const location = useLocation();
  const [page, setPage] = useState(1);

  // URL变化时重置page为初始值1
  useEffect(() => {
    setPage(1);
  }, [location.href]);

  const contentsLength = documentList.length;

  // 用函数式更新获取最新State，避免闭包问题
  const increment = () => {
    setPage(prevPage => {
      return contentsLength <= prevPage ? 1 : prevPage + 1;
    });
  };

  const decrement = () => {
    setPage(prevPage => {
      return prevPage <= 1 ? contentsLength : prevPage - 1;
    });
  };

  return (
    <div className={className}>
      <button onClick={decrement}>down</button>
      <button onClick={increment}>up</button>
      <div>{page}</div>
    </div>
  );
};

export default AreaInfoPannel;

关键修复点说明 #

• 修正事件绑定：把on_click改为onClick，确保按钮点击能触发增减逻辑。
• 函数式更新State：在setPage中使用回调函数获取最新的prevPage值，无论组件何时渲染，都能基于当前最新的State执行更新，彻底解决闭包带来的旧值问题。
• 保留URL监听逻辑：useEffect监听location.href，当URL参数变化（比如示例中name从john切换为kid）时，会自动触发setPage(1)，将页码重置为初始值。

验证建议 #

可以在useEffect中添加日志，确认URL变化时重置逻辑是否执行：

useEffect(() => {
  console.log("URL已变更，重置页码为1");
  setPage(1);
}, [location.href]);

这样就能直观看到URL变化时的重置动作，同时按钮的增减功能也能正常工作。

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