给url的query传参时的奇妙现象

背景

• react@16.6.0
• 类组件

心路历程

如果你要传一个时间参数，那么要小心啦！这个问题看得我头疼。见下面例子：

let start_time="23-10-10 00:00:00"
let urlTo=`/syslog?start_time=${start_time}`

好的，要执行跳转了。此时urlTo在浏览器url栏中会变成：

/syslog?start_time=2023-10-10%2000:00:00

也就是空格变成了%20。一开始并不在意，我就在另一个组件用下面的方式把参数取了出来：

var searchParams = new URLSearchParams(location.hash);
for (let p of searchParams) {
	console.log(p);
}

// 打印
['#/syslog?start_time', '2023-10-04 00:00:00']

看起来没什么问题是吧？然而，我什么都没做，这个组件就给我渲染了4次！正常情况下其实是渲染两次。
渲染次数暂且不谈。让我们看看会发生什么？

我原本state中有个filter属性，我要根据url传进来的参数初始化filter

this.state={
	filter:{
		start_time:searchParams.get('start_time') || ''
    }
}

render(){
	console.log(this.state.filter)
}

结果你猜怎么着，前两次渲染打印的是传过来的参数，而后面两次被某种神秘因素置为空了！就是这个问题，卡了我好久。后面探索出要改哪里了，但依旧不知道为什么要这样改。

改法很简单，不要传空格！

let urlTo=`/syslog?start_time=${start_time.replace(' ','T')}`

所以这是为什么呢？