如何不依赖库将输入值作为路由参数传服务器？遇空对象问题

问题根源 #

1. setSearchParams是异步操作：调用setSearchParams(input)后，searchParams不会立刻更新，所以你紧接着拼接URL时，它还是初始的空对象。
2. 误用react-router-dom的useSearchParams：这个Hook是用来管理浏览器地址栏查询参数的，并非构建请求URL参数的工具，没必要用它处理请求参数。

解决方案 #

不需要自行编写编码函数，原生URLSearchParams已经内置了URL编码能力，完全不依赖第三方库就能实现需求。

修改你的handleSubmit函数：

const handleSubmit = (e) => {
  e.preventDefault();
  // 直接用input对象创建URLSearchParams实例
  const params = new URLSearchParams(input);
  axios
    .put(`http://localhost:8080/api/v1/products/${id}?${params}`)
    .then((res) => console.log(res))
    .catch((err) => console.log(err));
  
  // 若需要同步更新浏览器地址栏的参数，再调用setSearchParams
  setSearchParams(input);
};

同时确保onChange函数正确更新输入状态：

const onChange = (e) => {
  const { name, value } = e.target;
  setInput(prev => ({ ...prev, [name]: value }));
};

补充说明 #

• 原生URLSearchParams会自动处理特殊字符（如空格、中文）的编码，无需手动干预。
• 仅当需要同步浏览器地址栏参数时，才需要使用useSearchParams；单纯发送请求参数的场景，直接用原生API即可。

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