Как добавить массив в запрос с помощью useSearchParams?

Question

Hunter

react

Как добавить массив в запрос с помощью useSearchParams?

Как можно модифицировать приведённый выше код для добавления параметра "order_status" таким образом, чтобы итоговый URL выглядел как <br/><pre><code class="javascript">http://localhost:3000/?names=&amp;email=&amp;order_status[]=1&amp;order_status[]=2</code></pre>?

29 сентября 2024 г. 5:43

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для добавления массива параметров в URL с помощью `useSearchParams` из React Router, можно использовать `URLSearchParams`. Этот метод позволяет работать с параметрами запроса и формировать их в нужном формате. 

Вот как вы можете модифицировать ваш код, чтобы добавить параметр `order_status` как массив:

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

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

    const addOrderStatus = (statuses) => {
        // Создаем копию текущих параметров
        const newParams = new URLSearchParams(searchParams);

        // Для каждого статуса добавляем его как новый параметр
        statuses.forEach(status => {
            newParams.append('order_status[]', status);
        });

        // Обновляем параметры URL
        setSearchParams(newParams);
    };

    const handleClick = () => {
        // Пример добавления статусов
        addOrderStatus([1, 2]);
    };

    return (
        <div>
            <button onClick={handleClick}>Добавить order_status</button>
            <p>Текущий URL: {window.location.href}</p>
        </div>
    );
};

export default YourComponent;
```

### Пояснение:
1. **Импорт `useSearchParams`**: Это хук из библиотеки React Router, который позволяет вам работать с параметрами URL.
2. **Использование `URLSearchParams`**: Мы создаем новый экземпляр `URLSearchParams`, используя текущие параметры запроса. Это позволяет нам не изменять оригинальные параметры, а создать новый объект.
3. **Добавление параметров**: Мы проходимся по массиву `statuses` и для каждого элемента вызываем `newParams.append`, чтобы добавить его в параметры с ключом `order_status[]`.
4. **Обновление параметров URL**: С помощью `setSearchParams` мы обновляем параметры в URL.

Данный код при нажатии на кнопку будет добавлять параметры `order_status[]=1` и `order_status[]=2` в URL.