Различия

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

--- xuk_usesearchparams [2024/04/04 17:14]
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
@@ Строка 22: / Строка 24: @@
 };
+</code>
+==== Параметри як об'єкт ====
+Якщо рядок запиту містить кілька параметрів, постійно використовувати метод get() може бути незручно. Ось простий спосіб перетворити екземпляр класу URLSearchParams у звичайний об'єкт із властивостями.
+<code>
+const [searchParams] = useSearchParams();
+const params = useMemo(
+  () => Object.fromEntries([...searchParams]),
+  [searchParams]
+);
+const { name, maxPrice, inStock } = params;
+</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>