Различия

Показаны различия между двумя версиями страницы.

--- xuk_usesearchparams [2024/04/04 17:21]
tro
+++ xuk_usesearchparams [2024/04/09 19:17] (текущий)
tro
@@ Строка 1: / Строка 1: @@
 ====== Хук useSearchParams ======
+===== Читання параметрів з рядка адреси =====
 Для читання та зміни рядка запиту у React Router є хук useSearchParams, який є невеликою обгорткою над вбудованим у браузер класом [URLSearchParams]
-Він повертає масив із двох значень: об'єкт параметрів рядка запиту (примірник URLSearchParams) для поточного URL та функцію оновлення рядка запиту. Для отримання значень параметрів є метод URLSearchParams.get(key), який чекає на ім'я параметра і повертає його значення або null якщо у рядку запиту немає такого параметра.
+Він повертає масив із двох значень: об'єкт параметрів рядка запиту (примірник URLSearchParams) для поточного URL та функцію оновлення рядка запиту. Для отримання значень параметрів є метод **URLSearchParams.get(key)**, який чекає на ім'я параметра і повертає його значення або null якщо у рядку запиту немає такого параметра.
 <code>
 // src/pages/Products.jsx
@@ Строка 23: / Строка 25: @@
 </code>
-===== Параметри як об'єкт =====
+==== Параметри як об'єкт ====
 Якщо рядок запиту містить кілька параметрів, постійно використовувати метод get() може бути незручно. Ось простий спосіб перетворити екземпляр класу URLSearchParams у звичайний об'єкт із властивостями.
 <code>
@@ Строка 34: / Строка 36: @@
 </code>
+===== Встановлення параметра у рядок адреси =====
+<code>
+const [searchParams, setSearchParams] = useSearchParams();
+const name = searchParams.get("name");
+.
+.
+setSearchParams({ name: inputValue });
+</code>
+===== Відстеження змін у параметрах рядка адреси =====
+можна зреагувати на це і запустити ефект.
+<code>
+const App = () => {
+  const [user, setUser] = useState(null);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const username = searchParams.get("username");
+  useEffect(() => {
+    // Тут виконуємо асинхронну операцію,
+    // наприклад HTTP-запит за інформацією про користувача
+    if (username === "") return;
+    async function fetchUser() {
+      const user = await FakeAPI.getUser(username);
+      setUser(user);
+    }
+    fetchUser();
+  }, [username]);
+  const handleSubmit = e => {
+    e.preventDefault();
+    const form = e.currentTarget;
+    setSearchParams({ username: form.elements.username.value });
+    form.reset();
+  };
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <input type="text" name="username" />
+        <button type="submit">Search</button>
+      </form>
+      {user && <UserInfo user={user} />}
+    </>
+  );
+};
+</code>