javascript 如何使用React-Router-DOM v6 'useSearchParams'获取所有查询参数而不指定键？

uujelgoq 于 2023-01-01 发布在 Java

关注(0)|答案(1)|浏览(195)

我目前正在使用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",
    ...,
  },

JavaScript

来源：https://stackoverflow.com/questions/71973934/how-to-get-all-query-params-using-react-router-dom-v6-usesearchparams-without

1条答案

按热度按时间

bq3bfh9z1#

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方法，您可以改为"reduce"为对象。

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参数。

赞(0）回复(0）举报 2023-01-01

我来回答

javascript 如何使用React-Router-DOM v6 'useSearchParams'获取所有查询参数而不指定键？

1条答案

相关问题

热门标签

最新问答