Estoy tratando de obtener una lista de elementos de la matriz de una API, pero cuando uso la función de mapa en los elementos, dice que el mapa no es una función.
import React from 'react' import { useState } from 'react'; const axios = require('axios'); const Api = () => { const [items, setItems] = useState([]); const getUser = async () => { try { const response = await axios.get('http://localhost:5000/api/products'); console.log(response); setItems (JSON.stringify(response)); } catch (error) { console.error(error); } } return ( <div> <button onClick={getUser}> Fetch Data</button> <br /> <br /> <br /> {items} </div> )}
export default ApiNo deberías usar JSON.stringify . ya que ya es objeto
Simplemente cámbielo al siguiente código
const response = await axios.get('http://localhost:5000/api/products'); setItems(response.data);El método axios.get() devuelve el object y no puede usar el método map() en un objeto como se ha definido en el prototype de una matriz. Puede encontrar más detalles de Array.prototype.map() aquí
En primer lugar, comprendamos qué devuelve el método axios.get() .
{ // `data` is the response that was provided by the server data: {}, // `status` is the HTTP status code from the server response status: 200, // `statusText` is the HTTP status message from the server response statusText: 'OK', // `headers` the HTTP headers that the server responded with // All header names are lower cased and can be accessed using the bracket notation. // Example: `response.headers['content-type']` headers: {}, // `config` is the config that was provided to `axios` for the request config: {}, // `request` is the request that generated this response // It is the last ClientRequest instance in node.js (in redirects) // and an XMLHttpRequest instance in the browser request: {} } Puede encontrar más detalles aquí . Eso significa que los datos reales que está buscando residen en response.data . Necesitas extraerlo.
const { data } = response; Ahora necesita analizar y procesar los data en el formato renderizable de React .
Funcionó por setItems (response.data)
import React from 'react' import { useState } from 'react'; const axios = require('axios'); const Api = () => { const [items, setItems] = useState([]); const getItems = async () => { try { const response = await axios.get('http://localhost:5000/api/products'); console.log(response.data); setItems (response.data); console.log(response.data) } catch (error) { console.error(error); } } return ( <div> <button onClick={getItems}> Fetch Data</button> <br /> <br /> <br /> {items.map((item)=>( <div > <h1>{item.name}</h1> <h2>{item.price}</h2> </div> ))} </div> )}
export default Api