He usado React-Query muchas veces, pero cuando devuelvo una llamada a la API de Strapi, recibo el error:
TypeError: Cannot read properties of undefined (reading 'map')
Es básicamente una llamada de función simple de la siguiente manera:
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} /> )); }Este es el formato JSON del retorno de strapi:
{ "data": [ { "id": 1, "attributes": { "name": "The Contemplation of Union", "description_long": "The graphite pencil work that started it all. Captured second place at the prestigious Brownlee O. Curry Art Competition.", "price": 399, "createdAt": "2022-05-01T02:07:51.795Z", "updatedAt": "2022-05-01T02:07:54.191Z", "publishedAt": "2022-05-01T02:07:54.189Z" } }, { "id": 2, "attributes": { "name": "Homage to Dali", "description_long": "The seminal dedication and homage to the great Salvador Dali. Here is the Soft Construction with Boiled Beans (Premonition of Spanish Civil War)", "price": 599, "createdAt": "2022-05-01T02:08:52.013Z", "updatedAt": "2022-05-01T02:08:53.458Z", "publishedAt": "2022-05-01T02:08:53.456Z" } }, { "id": 3, "attributes": { "name": "Still Life with Melon", "description_long": "Still life painted alla prima with juicy Melon and found objects", "price": 399, "createdAt": "2022-05-01T02:09:49.536Z", "updatedAt": "2022-05-01T02:09:50.840Z", "publishedAt": "2022-05-01T02:09:50.839Z" } } ], "meta": { "pagination": { "page": 1, "pageSize": 25, "pageCount": 1, "total": 3 } } }Cuando ejecuto esto, obtengo la solicitud como 200, por lo que se obtienen los datos y la recuperación. No creo que me esté refiriendo a los datos de la manera adecuada.
No estoy familiarizado con React-Query, pero lo que noté es que la respuesta JSON no tiene productos de propiedad, solo datos.
Entonces, el código de reacción debería verse así:
export default function ProductList() { const { data: products, isLoading } = useQuery('Products', () => axios('/api/products').then((res) => res.data) ); if (isLoading) return <LoadingSpinner /> return products.map((product) => ( <ProductItem key={product.id} product={product} /> )); }Espero que esto ayude.
¿Por qué no presenta un botón ficticio como ese? Simplemente haga clic en la consola para registrar los "productos" y asegurarse de que estén en el formato que desea.
export default function ProductList() { const { data: products, isLoading } = useQuery('Products', () => axios('/api/products').then((res) => res.data) ); if (isLoading) return <LoadingSpinner /> return <div> <button onClick={() => console.log("products", products)}>Click to see products</button> {products.data.map((product) => ( <ProductItem key={product.id} product={product} /> ))} </div> }