使用useHistory传递多词字符串时，history.push的state变为undefined

一、state传递失效（含空格字符串变成undefined） #

你的代码存在两个关键问题：

• setState是异步操作：调用setValue(event.target.value)后，组件state不会立刻更新，此时history.push里的value还是更新前的旧值（比如初始空字符串），导致带空格的字符串无法正确传入state。
• URL搜索参数未编码：含空格的字符串直接拼入search会导致URL格式非法，可能干扰路由对state的解析。

修复代码 #

修改第一个组件的onKeyPress函数：

const onKeyPress = event => {
  if (event.key === "Enter" && event.target.value.length > 0) {
    const inputValue = event.target.value; // 直接获取输入值，避开异步state更新
    setValue(inputValue);
    event.preventDefault();
    history.push({
      pathname: "/home/Search",
      search: `SearchText=${encodeURIComponent(inputValue)}`, // 对参数进行URL编码
      state: { value: inputValue }
    })
  }
}

二、useEffect执行两次 #

这是React 18开发环境下的严格模式行为，严格模式会主动触发两次副作用（包括useEffect），用于检测组件中可能存在的挂载/卸载逻辑问题，生产环境下不会出现该现象。

如果需要在开发环境临时规避，可以移除根组件的<React.StrictMode>包裹，但更推荐让你的副作用逻辑保持幂等（执行多次也不会产生错误），适配严格模式的检测机制。

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