Estoy tratando de mapear un componente de tarjeta con datos de usuario que obtengo del jsonplaceholder usando axios. Sin embargo, cuando lo intenté, devuelve "Error de tipo: no se pueden leer las propiedades de undefined (leyendo 'mapa')". Probé todas las soluciones en la web sin éxito. ¡Por favor ayuda!
Aquí está el código que declaró 'usuarios';
export const useAllUsers = () => { const [users, setUsers] = useState<Array<User>>() const getUsers = useCallback(() => { axios .get<Array<User>>('https://jsonplaceholder.typicode.com/users') .then(res => { setUsers(res.data)}) .catch(() => { return <MessageError /> }) .finally(()=>{ setLoading(false) }) }, []) return { getUsers, loading, users } }Luego, traté de mapear a los 'usuarios' para obtener todos los datos de usuario de la siguiente manera:
export const UserManagement: VFC = memo(() => { const { getUsers, users, loading } = useAllUsers() useEffect(() => getUsers(), []) return ( <> {loading ? ( <div className=' flex justify-center items-center'> <div className='animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900'></div> </div> ) : ( <div className='grid grid-cols-2 mb-16 md:grid-cols-3 lg:grid-cols-4 sm:px-6 md:px-16' > <div className='grid mx-auto'> {users.map(user => ( <UserCard key={user.id} userName={user.username} imageUrl='https://source.unsplash.com/random' userId={user.name} /> ))} </div> </div> )} </> ) })El tipo de usuario solo tiene un montón de tipos para datos de usuario, así que creo que este no es el problema, ¿supongo?
export type User = { id: number name: string username: string email: string hobbies: string }Creo que está tratando de mapear a sus usuarios antes de que se realice la solicitud de get , por lo que no está definido. Prueba algo como
{ users && users.map((user) => ( <UserCard key={user.id} userName={user.username} imageUrl="https://source.unsplash.com/random" userId={user.name} /> )); }Tiene un "estado" de loading para protegerse contra el intento de representar los elementos antes de que se hayan obtenido los datos, pero en useAllUsers nunca declaró la loading con un estado de uso, por lo que en useState siempre será falso, lo que lo UserManagement a intentar renderizar users antes de que estén listos.
Para solucionarlo, puede agregar el useState de carga que falta, y también le aconsejo que coloque una matriz vacía como el valor inicial de un estado de tipo de matriz de esta manera:
const [users, setUsers] = useState<Array<User>>([])