Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Інтеграція Хука useSearchParams | Розширені Можливості React Router
Основи React Router

bookІнтеграція Хука useSearchParams

У компоненті ProductsPage інтегрується хук useSearchParams для керування параметрами запиту.

import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);
  const [searchParams, setSearchParams] = useSearchParams();

  // Function to update the displayed `companies` based on query parameters
  const updateCompanies = (params) => {
    const filteredCompanies = data.filter((item) => {
      const { companyName } = item;
      if (params.get("name")) {
        return companyName.toLowerCase().includes(params.get("name"));
      }
      return true;
    });
    setCompanies(filteredCompanies);
  };

  useEffect(() => {
    // When the component mounts or query parameters change, update the displayed `companies`
    updateCompanies(searchParams);
  }, [searchParams, data]);

  // Function to update query parameters based on user input
  const handleChange = (e) => {
    const newName = e.target.value;
    setSearchParams({ name: newName });
  };

  return (
    <>
      <input
        type="text"
        value={searchParams.get("name") || ""}
        onChange={handleChange}
      />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

Ось детальний розбір коду:

  1. Імпортуються необхідні залежності: useState, useEffect та useSearchParams з React Router;
  2. Усередині компонента ініціалізується стан за допомогою useState. Стан companies містить дані для відображення, а функція setCompanies використовується для їх оновлення;
  3. Створюється функція updateCompanies для фільтрації даних на основі параметрів запиту. Функція приймає поточні параметри запиту як екземпляр URLSearchParams і використовує їх для фільтрації data. У цьому випадку фільтрація відбувається за параметром "name";
  4. Хук useEffect використовується для запуску функції updateCompanies під час монтування компонента та при зміні параметрів запиту. Це гарантує, що відображувані дані залишаються синхронізованими з URL;
  5. Функція handleChange оновлює параметр запиту "name" у відповідь на введення користувача. Коли змінюється поле введення, викликається setSearchParams з новим значенням параметра;
  6. У операторі return компонента відображається поле введення для користувача та список компаній на основі відфільтрованих даних.

Цей код демонструє, як інтегрувати useSearchParams і React Router для створення динамічного вебзастосунку, який реагує на зміни параметрів запиту.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 6

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how `useSearchParams` works in this example?

What happens if the user clears the input field?

How can I add more filters using query parameters?

Awesome!

Completion rate improved to 4.17

bookІнтеграція Хука useSearchParams

Свайпніть щоб показати меню

У компоненті ProductsPage інтегрується хук useSearchParams для керування параметрами запиту.

import React, { useState, useEffect } from "react";
import { useSearchParams } from "react-router-dom";

const ProductsPage = ({ data }) => {
  const [companies, setCompanies] = useState(data);
  const [searchParams, setSearchParams] = useSearchParams();

  // Function to update the displayed `companies` based on query parameters
  const updateCompanies = (params) => {
    const filteredCompanies = data.filter((item) => {
      const { companyName } = item;
      if (params.get("name")) {
        return companyName.toLowerCase().includes(params.get("name"));
      }
      return true;
    });
    setCompanies(filteredCompanies);
  };

  useEffect(() => {
    // When the component mounts or query parameters change, update the displayed `companies`
    updateCompanies(searchParams);
  }, [searchParams, data]);

  // Function to update query parameters based on user input
  const handleChange = (e) => {
    const newName = e.target.value;
    setSearchParams({ name: newName });
  };

  return (
    <>
      <input
        type="text"
        value={searchParams.get("name") || ""}
        onChange={handleChange}
      />
      <ul className="companyList">
        {companies.map(({ id, companyName, companyDescription }) => (
          <li key={id}>
            <h2>{companyName}</h2>
            <p>{companyDescription}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

Ось детальний розбір коду:

  1. Імпортуються необхідні залежності: useState, useEffect та useSearchParams з React Router;
  2. Усередині компонента ініціалізується стан за допомогою useState. Стан companies містить дані для відображення, а функція setCompanies використовується для їх оновлення;
  3. Створюється функція updateCompanies для фільтрації даних на основі параметрів запиту. Функція приймає поточні параметри запиту як екземпляр URLSearchParams і використовує їх для фільтрації data. У цьому випадку фільтрація відбувається за параметром "name";
  4. Хук useEffect використовується для запуску функції updateCompanies під час монтування компонента та при зміні параметрів запиту. Це гарантує, що відображувані дані залишаються синхронізованими з URL;
  5. Функція handleChange оновлює параметр запиту "name" у відповідь на введення користувача. Коли змінюється поле введення, викликається setSearchParams з новим значенням параметра;
  6. У операторі return компонента відображається поле введення для користувача та список компаній на основі відфільтрованих даних.

Цей код демонструє, як інтегрувати useSearchParams і React Router для створення динамічного вебзастосунку, який реагує на зміни параметрів запиту.

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 6
some-alt