React: Uncaught TypeError: animes.map is not a function-CodePudding

I'm new to React and I'm doing an Anime project. I've managed to get the values of the animes from the Jikan API with the map function. But the url's correspond to for example "https://api.jikan.moe/v4/genres/anime" or "https://api.jikan.moe/v4/top/anime?filter=bypopularity", but if i change that same url to a specific character (for example: "https://api.jikan.moe/v4/people/5579") or a specific movie (for example "https://api.jikan.moe/v4 /anime/38000") tells me that "animes.map is not a function". I've verified that the parameters are correct. I would appreciate your help.


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;```

CodePudding user response：

If you want to access a people Id directly then you need to remove map

Here is sandbox

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 App

CodePudding user response：

If you need to support both The https://api.jikan.moe/v4/genres/anime search and
specific character like https://api.jikan.moe/v4/people/5579 Then on the response time you can check whether response you get is an array or not, If its not you can convert it to an array so your

{animes.map((anime) => (
        <div key={anime.mal_id}>
          <h2>{anime.name}</h2>
        </div>
      ))}

does not get breaks, here how you can do that

    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);
  }
};

but though it is not a good practice to do in that way. You should have a page which lists all animes and when a user click on a single anime you should have a separate page for it, it will help to have a more deterministic approach.

CodePudding user response：

You are trying to map an object not an array which is not possible. If you want to get all people information, you should remove the id from api call then it will work fine.

const response = await fetch("https://api.jikan.moe/v4/people");

Here is the working version without id https://codesandbox.io/embed/thirsty-feistel-yjs6my?fontsize=14&hidenavigation=1&theme=dark.

Instead if you want to use single people object, just remove the map part