React‑компонент для вывода и поиска списка пользователей

Условие

Разработайте простой React‑компонент, который отправляет запрос к бесплатному API (https://jsonplaceholder.typicode.com/users) для получения массива пользователей и выводит их имена на странице. Добавьте поле ввода, позволяющее выполнять поиск по имени пользователя; результаты должны обновляться мгновенно по мере ввода текста. При необходимости переименуйте переменные, но сохраняйте всю структуру кода без изменений.

Ответ

Загрузите пользователей в эффекте, а фильтр вычисляйте из списка и строки поиска. Для мгновенного поиска по уже полученным данным новый запрос не нужен.

Исходный компонент не приложен, поэтому пример самостоятельный:

function Users() {
  const [users, setUsers] = React.useState([]);
  const [query, setQuery] = React.useState('');
  const [status, setStatus] = React.useState('loading');
  React.useEffect(() => {
    const controller = new AbortController();
    (async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users', { signal: controller.signal });
        if (!response.ok) throw new Error('HTTP');
        const data = await response.json();
        if (!Array.isArray(data) || data.some(x => !x || typeof x.name !== 'string')) throw new Error('Формат');
        if (!controller.signal.aborted) { setUsers(data); setStatus('ready'); }
      } catch { if (!controller.signal.aborted) setStatus('error'); }
    })();
    return () => controller.abort();
  }, []);
  const visible = users.filter(user => user.name.toLowerCase().includes(query.toLowerCase()));
  return <section>
    <label>Имя <input value={query} onChange={e => setQuery(e.target.value)} /></label>
    {status === 'loading' && <p>Загрузка…</p>}
    {status === 'error' && <p role='alert'>Не удалось загрузить список</p>}
    <ul>{visible.map(user => <li key={user.id}>{user.name}</li>)}</ul>
    {status === 'ready' && !visible.length && <p>Ничего не найдено</p>}
  </section>;
}

AbortController и проверка отмены предотвращают применение результата после очистки эффекта.