Как получить все параметры запроса с помощью React-Router-DOM v6 `useSearchParams` без указания ключа?

В настоящее время я работаю над проектом React с react-router-dom v6 и хочу получить все параметры запроса.

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

Я хочу получить как страницу, так и размер страницы. Я знаю, что мы можем использовать этот код ниже, чтобы получить параметры с ключами.

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",
    ...,
  },
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
152
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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((key, value) => {
    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-loop или .forEach вы можете вместо этого «свести» к объекту.

const params = {};

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

-- or --

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

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

...

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

Все это говорит о том, что, вероятно, все же лучше использовать метод .get и явно получать конкретные параметры queryString.

Другие вопросы по теме