Estoy tratando de mostrar una lista de hechos de esta API de hechos de gatos https://catfact.ninja/facts?limit=15 .
Obtuve los datos y vi los hechos, 0-14, que se muestran en la consola. Creé un mapa () para iterar a través de la matriz, pero solo se mostrará el primer hecho en la lista. ¡Gracias por tu ayuda!
import React, { useState, useEffect } from 'react'; const url = 'https://catfact.ninja/facts?limit=15'; const Index = () => { const [factList, setFactList] = useState([]); useEffect(() => { getList() },[]); const getList = () => { fetch(url) .then((res) => res.json()) .then((list) => { console.log('List:', list); const [factList] = list.data setFactList([factList]) }) .catch((err) => { console.log('List ERROR ', err); }) } return ( <div className='App'> <h1>FACT LIST</h1> <ul> {factList.map((item, index) => <li key={index}> {item.fact} </li> )} </ul> </div> ) } export default IndexCambie su función de búsqueda a esto:
const getList = () => { fetch(url) .then((res) => res.json()) .then((list) => { setFactList(list.data); }) .catch((err) => { console.log("List ERROR ", err); }); }; const [factList] = list.data; hace que solo el primer elemento de la matriz se asigne a factList . Obtenga más información sobre la desestructuración en JS.