react 获取 search 方式传递的参数（URLSearchParams 和 querystring）

1.通过 URLSearchParams 获取

URLSearchParams() 返回一个 URLSearchParams 对象。该接口不继承任何属性。

方法：

（1）URLSearchParams.append() 插入一个指定的键/值对作为新的搜索参数，没有返回值。

（2）URLSearchParams.delete() 从搜索参数列表里删除指定的搜索参数及其对应的值。没有返回值。

（3）URLSearchParams.entries() 返回一个iterator可以遍历所有键/值对的对象。

（4）URLSearchParams.keys()返回iterator 此对象包含了键/值对的所有键名。

（5）URLSearchParams.values() 返回iterator 此对象包含了键/值对的所有值。

（6）URLSearchParams.set() 设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。没有返回值。

（7）URLSearchParams.get() 获取指定搜索参数的第一个值。返回指定键名的值。支持自动 UTF-8 解码

（8）URLSearchParams.getAll() 获取指定搜索参数的所有值，返回是一个数组。

（9）URLSearchParams.has() 返回 Boolean 判断是否存在此搜索参数。

（10）URLSearchParams.sort() 按键名排序。

（11）URLSearchParams.toString()返回搜索参数组成的字符串，可直接使用在URL上。

使用：

const { location: { search } } = props;
const individualReportDs = useMemo(() => new DataSet(individualReportDS()), []);
const searchParams = new URLSearchParams(search.substring(1));
 
useEffect(() => {
  if (searchParams?.get('reportCode')) {
    individualReportDs?.queryDataSet?.reset();
    individualReportDs?.queryDataSet?.create({ reportCode: searchParams.get('reportCode') }, 0);
  }
  individualReportDs.query();
}, []);　

2.通过 querystring

import qs from 'querystring';
...
const { location: { search } } = props;
const individualReportDs = useMemo(() => new DataSet(individualReportDS()), []);
 
useEffect(() => {
  if (search && search.slice(1)) {
    const { reportCode } = qs.parse(search.slice(1));
    individualReportDs?.queryDataSet?.reset();
    individualReportDs?.queryDataSet?.create({ reportCode }, 0);
  }
  individualReportDs.query();
}, []);