Soy nuevo en React y estoy haciendo un proyecto de Anime. Logré obtener los valores de los animes de la API de Jikan con la función de mapa. Pero las url corresponden a, por ejemplo, "https://api.jikan.moe/v4/genres/anime" o "https://api.jikan.moe/v4/top/anime?filter=bypopularity", pero si cambie esa misma URL a un carácter específico (por ejemplo: "https://api.jikan.moe/v4/people/5579") o una película específica (por ejemplo "https://api.jikan.moe/v4/ anime/38000") me dice que "animes.map no es una función". He comprobado que los parámetros son correctos. Apreciaría tu ayuda.
const getAnimes = async () => { try { const response = await fetch('https://api.jikan.moe/v4/people/5579'); const animes = await response.json(); return animes; } catch (error) { console.error(error); } }; function App() { const [animes, setAnimes] = useState([]); const fetchAnimes = async () => { try { const data = await getAnimes(); setAnimes(data.data); } catch (error) {} }; useEffect(() => { fetchAnimes(); }, []); return ( // <React.Fragment> <> <header> <h1>Search Anime</h1> </header> <main> <article className="countries"> {animes.map((anime) => ( <div key={anime.mal_id}> <h2>{anime.name}</h2> </div> ))} </article> </main> </> // </React.Fragment> ); } export default App;```Si desea acceder a una identificación de personas directamente, debe eliminar el map
Aquí está la caja de arena
import {useState, useEffect} from 'react'; const getAnimes = async () => { try { const response = await fetch('https://api.jikan.moe/v4/people/5579'); const animes = await response.json(); return animes; } catch (error) { console.error(error); } }; function App() { const [animes, setAnimes] = useState([]); const fetchAnimes = async () => { try { const data = await getAnimes(); setAnimes(data.data); } catch (error) {} }; useEffect(() => { fetchAnimes(); }, []); return ( // <React.Fragment> <> <header> <h1>Search Anime</h1> </header> <main> <article className="countries"> <div key={animes.mal_id}> <h2>{animes.name}</h2> { console.log(animes) } </div> </article> </main> </> // </React.Fragment> ); } export default AppSi necesita admitir tanto la búsqueda https://api.jikan.moe/v4/genres/anime como
carácter específico como https://api.jikan.moe/v4/people/5579 Luego, en el tiempo de respuesta, puede verificar si la respuesta que obtiene es una matriz o no. Si no es así, puede convertirla en una matriz para que su
{animes.map((anime) => ( <div key={anime.mal_id}> <h2>{anime.name}</h2> </div> ))}no tiene descansos, aquí cómo puedes hacer eso
const getAnimes = async () => { try { const response = await fetch('https://api.jikan.moe/v4/people/5579'); let animes = await response.json(); if (!Array.isArray(animes)) { animes = [animes] } return animes; } catch (error) { console.error(error); } };pero aunque no es una buena práctica hacerlo de esa manera. Debe tener una página que enumere todos los animes y cuando un usuario haga clic en un solo anime, debe tener una página separada para él, ayudará a tener un enfoque más determinista.
Está intentando map un object , no una array , lo que no es posible. Si desea obtener la información de todas las people , debe eliminar la id de la llamada api y luego funcionará bien.
const response = await fetch("https://api.jikan.moe/v4/people"); Aquí está la versión de trabajo sin id https://codesandbox.io/embed/thirsty-feistel-yjs6my?fontsize=14&hidenavigation=1&theme=dark .
En cambio, si desea utilizar un objeto de personas individuales, simplemente elimine la parte del map