Различия

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

--- xuk_usesearchparams [2024/04/09 19:16]
tro
+++ xuk_usesearchparams [2024/04/09 19:17] (текущий)
tro
@@ Строка 43: / Строка 43: @@
 .
 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>