import axios from "axios"; import { useEffect, useState } from "react"; import "./styles.css"; export default function App() { const [userDataInfo, setUserDataInfo] = useState([]); const fetchData = () => { axios .get("https://random-data-api.com/api/address/random_address") .then(function (response) { // console.log(response.data); return JSON.stringify(response); }) .then(function (data) { setUserDataInfo(data); }); }; useEffect(() => { fetchData(); }, [userDataInfo]); return ( <div className="App"> {userDataInfo.map((data) => ( <p>{}</p> ))} </div> ); } TypeError userDataInfo.map is not a function App /src/App.js:26:20 23 | 24 | return ( 25 | <div className="App"> > 26 | {userDataInfo.map((data) => ( | ^ 27 | <p>{}</p> 28 | ))}`enter code here` 29 | </div>En general, el método map() se usa para iterar sobre una matriz y llamar a una función en cada elemento de la matriz y si estoy usando userDataInfo como una matriz, ¿por qué recibo este error?
const [userDataInfo, setUserDataInfo] = useState([]);
userDataInfo comienza como una matriz.
.get("https://random-data-api.com/api/address/random_address")
Pero luego obtienes esa URL que devuelve una representación JSON de un objeto (no una matriz).
return JSON.stringify(response);
Y luego convierte el objeto en una cadena de JSON antes de almacenar esa cadena en setUserDataInfo .
fetch o localStorage ). No es útil para procesar estructuras de datos internamente.userDataInfo . Si va a almacenar varias direcciones allí, use una matriz (y cambie el manejo de los datos de la URL para reflejar eso... por ejemplo, agregando a una matriz existente en lugar de sobrescribir con un solo valor). Si va a usar solo un elemento, almacene solo un elemento (y deshágase del map ).el objeto de respuesta tendría el siguiente formato
{ data:"some data" }suponiendo que la solicitud de API devuelve una matriz, todo lo que necesita hacer es:
axios .get("https://random-data-api.com/api/address/random_address") .then(function (response) { setUserDataInfo(response.data); })quizás eche un vistazo a la documentación de axios si necesita más aclaraciones sobre el esquema de respuesta a continuación: