如何在React应用中不区分大小写地移除查询字符串参数？

直接上修改后的代码，解决大小写匹配问题的同时修正原代码的拼写和语法错误：

const [searchParams, setSearchParams] = useSearchParams();
const keysToRemove = ['Title', 'State'];

// 把现有参数的键转成小写映射，保存实际的键名（区分大小写的原始值）
const paramKeys = Array.from(searchParams.keys());
const lowerCaseKeyMap = paramKeys.reduce((map, key) => {
  map[key.toLowerCase()] = key;
  return map;
}, {});

// 遍历要移除的键，不区分大小写匹配并删除
keysToRemove.forEach(targetKey => {
  const lowerTargetKey = targetKey.toLowerCase();
  const actualParamKey = lowerCaseKeyMap[lowerTargetKey];
  if (actualParamKey) {
    searchParams.delete(actualParamKey);
  }
});

// 更新查询参数
setSearchParams(searchParams);

核心思路 #

URLSearchParams的has()和delete()方法是大小写敏感的，我们通过以下步骤规避这个问题：

1. 提取当前所有查询参数的键，生成一个小写键名→原始键名的映射表
2. 将要移除的目标键统一转成小写，去映射表里找到实际存在的原始键名
3. 用原始键名调用delete()方法，确保能精准匹配并删除参数

原代码的小问题修正 #

• 拼写错误：seearchParams应该是searchParams
• 语法错误：if (searchParams.has(keys[index])缺少闭合括号)

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