0
306
ViewsLos datos de API no se procesan: reacciona
Estoy tratando de generar datos de la API pero, por alguna razón, no puedo hacerlo.
const [ data, setData ] = useState([]) const fetchData = () => { return ( fetch('https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf') .then(response => response.json()) .then(data => setData(data)) .catch(error => { console.log('Error fetching and parsing data', error) }) ) } useEffect(() => { fetchData() }, []); console.log('API DATA', data) Recibo la respuesta, pero no estoy seguro de por qué no se puede realizar el bucle. Supongo que es porque los datos están en formato JSON.
return ( { data.length > 0 && data.map((item, index) => { <div key={index}>{item.title}</div> }) } ) 
·
Juan Pablo Isaza
2 answers
Answer question0
No está devolviendo nada después de mapear a través de la matriz, actualice su declaración de devolución como:
return ( <> {data.length > 0 && data.map((item, index) => { return <div key={index}>{item.title}</div>; })} </> );o
return ( <> {data.length > 0 && data.map((item, index) => <div key={index}>{item.title}</div>)} </> ); Además, las expresiones JSX deben tener solo un elemento principal. Asegúrese de envolver la devolución en un fragmento , es decir, <>
·
Juan Pablo Isaza
Report
0
Prefiero axios y useRef para API
const [myData, setMyData, myDataRef] = useStateRef([]); const getData = () => { axios .get("https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf") .then((res) => { let data = res.data; console.log(data); setMyData(data); }); }; useEffect(() => { getData(); }, []); <div> {myDataRef.current.length > 0 && myDataRef.current.map((item, index) => { return <div key={index}>{item.title}</div>; })} </div>
·
Juan Pablo Isaza
Report
Answer question