如何在不指定密钥的情况下使用 React-Router-DOM v6 `useSearchParams` 获取所有查询参数？

Question

我目前正在使用 react-router-dom v6 开发一个 React 项目，我想获取所有查询参数。

http://localhost:3000/users?page=5&pageSize=25

我想同时获得 page 和 pageSize。我知道我们可以使用下面的代码来获取带有键的参数。

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

const Users = () => {

  const [searchParams, setSearchParams] = useSearchParams();

  const page = searchParams.get('page')
  const pageSize = searchParams.get('pageSize')


  return (<h1>page: {page}, pageSize: {pageSize}</h1>)
}

但是，然后我尝试使用 searchparams.getAll() 获取所有参数而不指定密钥，但它不起作用，React 应用程序只显示一个空白页面。

这是我用来获取所有参数的代码：

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

const Users = () => {

  const [searchParams, setSearchParams] = useSearchParams();

  const params = searchParams.getAll();

  console.log(params)

  return (<h1>params</h1>)
}

我在那里犯了什么错误吗？

这是我对package.json的依赖：

  "dependencies": {
    ...,
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.2",
    ...,
  },

Answer 1

URLSearchParams.getAll 仍然接受一个键并返回该键的所有值的数组。

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

//Add a second foo parameter.
params.append('foo', 4);

console.log(params.getAll('foo')) //Prints ["1","4"].

您可以使用 URLSearchParams.entries 返回一个迭代器，该迭代器可用于将条目推送到键/值对数组中。

例子：

const Users = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const params = [];

  for(let entry of searchParams.entries()) {
    params.push(entry);
  }

  console.log(params); // [["page", 5], ["pageSize", 25]]

  return (
    <>
      <h1>Params</h1>
      <ul>
        {params.map(([key, value]) => (
          <li key={key}>{key} - {value}</li>
        ))}
      </ul>
    </>
  );
}

您还可以使用 URLSearchParams.forEach 来迭代和捕获键/值对。

例子：

const Users = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const params = [];

  searchParams.forEach((value, key) => {
    params.push([key, value]);
  });

  console.log(params); // [["page", 5], ["pageSize", 25]]

  return (
    <>
      <h1>Params</h1>
      <ul>
        {params.map(([key, value]) => (
          <li key={key}>{key} - {value}</li>
        ))}
      </ul>
    </>
  );
}

使用 .entries for 循环或 .forEach 方法，您可以改为“减少”到一个对象。

const params = {};

for(let [key, value] of searchParams.entries()) {
  params[key] = value;
}

-- or --

searchParams.forEach((value, key) => {
  params[key] = value;
});

console.log(params); // { page: 5, pageSize: 25 }

...

params.page; // 5
params.pageSize; // 25

综上所述，最好还是使用 .get 方法并显式获取特定的 queryString 参数。