Компонент получения данных пользователя

Условие

Создайте React‑компонент, который принимает идентификатор пользователя и отображает его сведения. Для получения данных используйте функцию fetchUser. Если идентификатор отсутствует или пользователь не найден – компонент ничего не выводит.

type Props = {
  userId: number | null;
}
 
export const User: FC<Props> = ({ userId }) => {
  // Write your solution here
  const user = userId && fetchUser({ id: userId });
  if (!user) return null;

  return (
    <div className="stack column">
      <div>UserId: </div>
      <div>UserName: </div>
    </div>
  );
};

const Loader = () => <p data-testid="loader">Loading...</p>

const Error = ({ e } : {e: AxiosError}) => {
  <p style={{ color: "red" }} data-testid="error">
    {e.message}
  </p>
}

Ответ

fetchUser нельзя запускать прямо во время render, если он асинхронный. Перенесите загрузку в эффект по userId, храните loading/data/error и игнорируйте устаревшие ответы.

Считайте отсутствующим идентификатором userId === null, а не любое falsy-значение. В начале нового запроса очищайте прежние данные, показывайте Loader и после await сохраняйте результат только если эффект ещё активен. Cleanup должен отменять запрос, если fetchUser это поддерживает, либо выставлять active=false.

Для ответа null возвращайте null; обработку HTTP 404 как «не найден» определите в fetchUser. Ошибки сети показывайте отдельно. В компоненте Error пропущен return перед . Для типизированного решения сначала нужен контракт результата fetchUser: например Promise<{id:number;name:string}|null>. Названия полей и конкретный способ отмены из исходника неизвестны, их нельзя выдумывать как существующий API.