Создание React‑компонента для получения и отображения списка элементов

Условие

Разработать React‑компонент, который отправляет запрос к API‑эндпоинту /api/items, получает ответ в формате JSON и выводит полученные элементы в виде списка.

/api/items
{
  payload: {
    status: 6,
    list: [
      { id: 15, name: 'foo' },
      { id: 48, name: 'bar' }
    ]
  }
}

Ответ

Загрузите /api/items в эффекте, извлеките payload.list и отобразите элементы с key=id. Предусмотрите загрузку, ошибку, пустой список и отмену запроса при размонтировании.

function Items() {
  const [state, setState] = React.useState({ loading: true, items: [], error: '' });
  React.useEffect(() => {
    const controller = new AbortController();
    let active = true;
    (async () => {
      try {
        const response = await fetch('/api/items', { signal: controller.signal });
        if (!response.ok) throw new Error('Ошибка загрузки');
        const body = await response.json();
        if (!Array.isArray(body.payload?.list)) throw new Error('Неверный ответ');
        if (active) setState({ loading: false, items: body.payload.list, error: '' });
      } catch (error) {
        if (active) setState({ loading: false, items: [], error: 'Не удалось загрузить список' });
      }
    })();
    return () => { active = false; controller.abort(); };
  }, []);
  if (state.loading) return <p>Загрузка…</p>;
  if (state.error) return <p role="alert">{state.error}</p>;
  if (!state.items.length) return <p>Список пуст</p>;
  return <ul>{state.items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

React должен быть импортирован. Смысл прикладного status=6 не определён, поэтому не следует объявлять его кодом успеха или ошибки; HTTP-статус проверяется отдельно.