React/Next.js状态变更后useEffect内URL查询参数未更新问题求解

核心问题梳理 #

• 生成新URL后未执行路由更新
  你在useEffect中仅声明了newUrl变量，没有调用Next.js提供的路由更新方法（router.push/router.replace），浏览器地址栏不会自动同步你计算出的地址。
• useEffect依赖数组不完整
  你在useEffect中用到了query、url两个变量，但依赖数组仅填写了selectedStuff，当query或url变化时useEffect不会重新执行，导致URL无法同步更新。
• getQStringForSelectedStuff方法逻辑错误
  方法接收的参数是parameter（即你传入的selectedStuff），但方法内部循环的是未定义的params变量，导致该方法永远返回空字符串，project相关参数自然不会被添加或移除。
• 缺少空查询串的边界处理
  原逻辑中当查询串全为空时，拼接出的地址末尾会多一个无用的?，不符合URL规范。

修正后完整代码 #

// 如果你用的是Next.js Pages Router，从next/router引入useRouter
// 如果是App Router，从next/navigation引入useRouter
import { useRouter } from 'next/router'

export const MyStuffContainer = ({
  url,
  selectedStuff,
}: MyStuffContainerInterface) => {
  const [query, setQuery] = useQuery();
  const router = useRouter();

  const getQString = (parameter) => {
    const qString = [];
    for (const p in parameter) {
      qString.push(encodeURIComponent(p) + '=' + encodeURIComponent(parameter[p]));
    }
    return qString.join('&');
  };

  const getQStringForSelectedStuff = (parameter) => {
    const qStringWithSelectedStuff = [];
    // 修正循环对象为传入的parameter（即selectedStuff）
    parameter.forEach((item) => {
      qStringWithSelectedStuff.push('project=' + encodeURIComponent(item.id));
    });
    return qStringWithSelectedStuff.join('&');
  };

  useEffect(() => {
    const baseQuery = getQString(query);
    const selectedQuery = getQStringForSelectedStuff(selectedStuff);
    // 优化查询串拼接逻辑，自动过滤空值避免多余符号
    const fullQuery = [baseQuery, selectedQuery].filter(Boolean).join('&');
    const newUrl = fullQuery ? `${url}?${fullQuery}` : url;
    // 调用路由方法更新地址，replace不会留下历史记录，需要历史记录可以换成push
    router.replace(newUrl);
  // 补全所有用到的依赖
  }, [selectedStuff, query, url, router]);

}

效果验证 #

修正后即可符合预期效果：

1. 初始无参数时URL为纯路径格式
2. 选中项目时自动追加project参数
3. 取消选中项目时自动移除对应project参数
4. 原有其他查询参数可以正常保留同步

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