Next.js中如何从URL派生状态并在状态变化时更新查询参数？

你遇到的无限循环问题，根源是两个useEffect形成了闭环：修改状态触发URL更新，URL更新又触发状态修改，往复不停。解决的核心是只在状态和URL参数不一致时执行同步操作，避免无意义的重复更新。

步骤1：修正状态同步逻辑（URL → 组件状态） #

在更新状态前，先判断URL参数和当前状态是否一致，不一致才调用setCounter：

useEffect(() => {
  const urlCounter = parseInt(router.query.counter);
  // 排除非数字的情况，且仅当参数与当前状态不同时更新
  if (!isNaN(urlCounter) && urlCounter !== counter) {
    setCounter(urlCounter);
  }
}, [router.query.counter, counter])

步骤2：修正URL同步逻辑（组件状态 → URL） #

同样，更新URL前先对比当前状态和URL参数，不一致才执行router.push：

useEffect(() => {
  const urlCounter = parseInt(router.query.counter);
  // 仅当状态与URL参数不同时更新URL
  if (counter !== urlCounter) {
    router.push(`/items?counter=${counter}`, undefined, { shallow: true });
  }
}, [counter, router.query.counter])

补充：初始化状态从URL读取 #

为了避免初始加载时状态和URL参数不一致，建议直接从URL初始化状态：

const [counter, setCounter] = useState(() => {
  const initialCounter = parseInt(router.query.counter);
  // URL无有效参数时用默认值1
  return isNaN(initialCounter) ? 1 : initialCounter;
});

这样就能实现双向同步，同时彻底避免无限循环问题。

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