Este es un tema extremadamente desconcertante. El siguiente código da este error:
TypeError: Cannot read properties of undefined (reading 'map')Cuando se usa console.log() para ver res.data, está bien, tiene datos. res.data.products no está definido, por lo que explota el .map(). Simplemente no tiene sentido por qué esto no funciona. Empezando a pensar que hay un error en la biblioteca de consulta de reacción
export default function ProductList() { const { data: products, isLoading } = useQuery('Products', () => axios('/api/products').then((res) => res.data.products) ); if (isLoading) return <LoadingSpinner /> return products.map((product) => ( <ProductItem key={product.id} product={product} /> )); }Los datos devueltos por useQuery son de tipo undefined | T Lo que significa que puede no estar definido o tener la forma que espera que tenga. Esto se debe a que, cuando obtiene sus datos por primera vez, no los tiene en su caché, por lo que debe adquirirlos, generalmente a través de una solicitud HTTP. Debido a que estos datos tienen el potencial de ser undefined , debe protegerse contra el caso indefinido.
return (products?.map(..
Si actualiza su código a lo anterior, lo primero que hará es verificar y ver si los productos están definidos. Si no se ha definido, proporcionará una matriz vacía a la función de mapa. Dado que no hay nada que mapear, la declaración de devolución es una matriz vacía.
Además, si coloca la declaración de registro de su consola inmediatamente después de la llamada useQuery , debe notar que primero usa undefined, solo más tarde, después de que se haya resuelto la solicitud, los datos comenzarán a fluir.
Dicho esto, hay un caso en el que isLoading es falso, pero los datos son 'indefinidos' porque nunca pudieron resolverse por sí mismos.
Piensa en ello de esta manera: