React自定义路由中删除指定URL参数失效问题排查

问题描述 #

为实现React应用的可选分屏功能，自定义了路由规则，URL格式示例如下：

• 基础格式：http://myapp.com/app/?left.view.name=home&right.view.name=about
• 带参数格式：http://myapp.com/app/?left.view.name=home&right.view.name=about&right.view.params.param1=value1

在删除某一分屏相关的URL参数时出现功能异常，代码如下：

const url = new URL(window.location.href);
console.log(url.searchParams.toString());

url.searchParams.forEach((_, key) => {
    console.log(`key=${key}`);
    if (!key.startsWith(`${frameKey}.`)) { // frameKey为分屏标识，此处为left
        return;
    }
    url.searchParams.delete(key);
});

测试URL：http://myapp.com/app/?left.view.name=home&left.view.params.param1=value1
调用删除左侧分屏参数的函数后，控制台输出：

left.view.name=home&left.view.params.param1=value1
key=left.view.name

可见url.searchParams.toString()能正确输出所有参数，但forEach遍历仅返回了第一个key，未处理第二个参数。

将遍历的searchParams换成新URL实例的副本后，功能恢复正常：

// 修改后的遍历部分
new URL(window.location.href).searchParams.forEach((_, key) => {
    // ... 原有逻辑
});

原因分析 #

问题出在遍历实时的URLSearchParams集合时直接修改它：

• url.searchParams是和原URL实例绑定的实时集合，它的forEach迭代器基于当前集合的实时状态工作。当你在遍历过程中调用delete删除元素，会改变集合的内部长度和元素索引，打乱迭代器的遍历顺序，导致后续元素被跳过。
• 示例中原本有两个key，删除第一个key后，集合长度从2变为1，迭代器指针已移动到下一个位置，此时没有更多元素可遍历，第二个key因此永远不会被处理。
• 而使用new URL(window.location.href).searchParams时，遍历的是一个独立的参数副本，该副本和原url的searchParams无关联。遍历过程中修改原url的参数不会影响副本的迭代流程，所有key都能被正常遍历到，删除操作也能完整执行。

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