Tengo un objeto anidado en el estado del componente funcional React, pero solo puedo acceder al primer nivel del objeto si uso any tipo.
export default function Detail() { const [user, setUser] = useState<any>({}); const { id } = useParams(); useEffect(() => { fetch('http://localhost:4000/users/' + id) .then(response => { return response.json(); }) .then(data => { setUser(data); }) }, []); return ( <div> <h1>Detail view</h1> <p>ID: { user.id }</p> <p>First name: { user.first_name }</p> <p>Last name: { user.last_name }</p> <p>Email: { user.email }</p> <p>Gender: { user.gender }</p> </div> ); } Al intentar acceder a user.company.name arroja
Detail.tsx:40 Uncaught TypeError: Cannot read properties of undefined (reading 'name')Hice una interfaz para él, pero me da un error si intento usarlo para el tipo de estado.
interface UserInfo { id: number; first_name: string; last_name: string; email: string; gender: string; company: { name: string; department: string; } } Argument of type '{}' is not assignable to parameter of type 'UserInfo | (() => UserInfo)'.¿Cómo puedo usar la interfaz definida como tipo de estado?
No use any tipo. TypeScript no puede ayudarlo si no usa tipos reales. Escriba el estado estrictamente.
No utilice un objeto vacío como su valor predeterminado. No es útil. Utilice un valor que indique claramente que los datos aún no están disponibles.
type PossibleUserInfo = UserInfo | null; const [user, setUser] = useState<PossibleUserInfo>(null);Luego, maneje el caso en el que aún no tiene los datos explícitamente.
No es útil escupir un div con un montón de párrafos que contienen una etiqueta pero no datos.
if (user) { return ( <div> <h1>Detail view</h1> <p>ID: { user.id }</p> <p>First name: { user.first_name }</p> <p>Last name: { user.last_name }</p> <p>Email: { user.email }</p> <p>Gender: { user.gender }</p> </div> ); } return ( <div> <h1>Default view</h1> <Loading /> </div> ); … donde Loading es un componente que muestra (por ejemplo) un control giratorio de carga .