/** * Scrivi un componente che riceve l'utente tramite {{userId}} e mostra i dati principali * Per la richiesta, usare fetchUser */ export const User: FC<Props> = ({ userId }) => { // Scrivi qui la tua soluzione: const user = userId && fetchUser({ id: userId }); if (!user) return null; return ( <div className="stack column"> <div>UserId: </div> <div>UserName: </div> </div> ); };

tsx import React, { FC, useEffect, useState } from 'react';

interface Props { userId: string; }

interface User { id: string; name: string; // другие поля по необходимости }

// Предполагается, что fetchUser возвращает Promise<User> async function fetchUser(params: { id: string }): Promise<User> { // Реализация запроса к API const response = await fetch(/api/users/${params.id}); if (!response.ok) throw new Error('Failed to fetch user'); return response.json(); }

export const User: FC<Props> = ({ userId }) => { const [user, setUser] = useState<User | null>(null); const [loading, setLoading] = useState<boolean>(false); const [error, setError] = useState<string | null>(null);

useEffect(() => { if (!userId) { setUser(null); return; } setLoading(true); setError(null); fetchUser({ id: userId }) .then(setUser) .catch(() => setError('Ошибка загрузки пользователя')) .finally(() => setLoading(false)); }, [userId]);

if (loading) return <div>Загрузка...</div>; if (error) return <div>{error}</div>; if (!user) return null;

return ( <div className="stack column"> <div>UserId: {user.id}</div> <div>UserName: {user.name}</div> </div> ); };