React中如何从searchParams获取对象类型参数的键与值？

URL查询参数仅支持字符串类型值。如果构造URL时直接传入JS对象作为task参数值，没有做序列化处理，JS会自动调用对象的toString()方法，最终传入参数的实际值就是固定字符串[object Object]。此时接收端拿到的从始至终都是这个字符串，任何后续处理都无法还原原始对象内容。

1. 传参端：先序列化对象再传值 #

拼接URL设置参数时，必须先把待传递的对象转为JSON字符串，再赋值给task参数：

// 传参端示例
import { useNavigate, createSearchParams } from 'react-router-dom';

const navigate = useNavigate();
// 待传递的任务对象
const taskObj = {
  id: 101,
  title: "页面重构",
  owner: "张三",
  status: "处理中"
};

// 跳转时序列化对象
navigate({
  pathname: "/raw-data",
  search: `?${createSearchParams({
    task: JSON.stringify(taskObj)
  })}`
});

2. 接收端：反序列化后遍历渲染 #

接收参数时先拿到JSON字符串，解析为JS对象后再遍历键值对渲染，同时增加错误容错，避免参数格式异常导致页面崩溃：

import { useSearchParams } from 'react-router-dom';

const ClientRawData = () => {
  const [searchParams] = useSearchParams();
  const taskParam = searchParams.get('task');

  // 解析参数，加异常捕获
  let taskData = null;
  try {
    taskData = taskParam ? JSON.parse(taskParam) : null;
  } catch (err) {
    console.error('task参数格式非法，解析失败', err);
  }

  return (
    <div>
      This is the raw Data: <br />
      <div className='users'>
        {taskData ? (
          Object.entries(taskData).map(([key, value]) => (
            <div className='user' key={key}>
              <span className="key">{key}: </span>
              <span className="value">
                {typeof value === 'object' ? JSON.stringify(value) : value}
              </span>
            </div>
          ))
        ) : (
          <div className="error">未获取到有效task参数</div>
        )}
      </div>
    </div>
  );
};

export default ClientRawData;

• 调用JSON.stringify：你拿到的初始值就是"[object Object]"字符串，对字符串做序列化只会得到带转义的字符串结果，无法还原对象
• 将参数值包裹在数组中：仅改变了值的外层包裹结构，参数本身还是无效字符串，没有实质作用
• 调用Object.keys/Object.values：传入字符串时，这类方法会把字符串视作类数组对象，返回的是字符串索引位，根本拿不到原始对象的键值

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