REACT：Unturef TypeError：Animes.map不是功能

Question

我是新手反应，并且正在进行动漫项目。我设法通过MAP功能从Jikan API中获取动漫的值。但是URL与例如“ https://api.jikan.moe/v4/genres/anime”或“ https://api.jikan.moe/v4/top/top/anime?filter = bypopularity”将相同的URL更改为特定字符（例如： “ https://api.jikan.moe/v4/people/5579”）或特定的电影（例如“ https://api.jikan.moe/v4/nime/38000”）告诉我，不是功能”。我已经验证了参数是正确的。感谢您的帮助。

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

Answer 1

如果要直接访问人ID，则需要删除地图

---

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

Answer 2

如果您需要同时支持 https://api.jikan.moe/v4/genres/genres/genres/genres/anime/anime 搜索和
特定角色，例如 https://api.jikan.moe/v4/people/5579 然后，在响应时间您可以检查响应是否是数组，如果不是数组，则可以将其转换为数组，以便您

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

没有休息，在这里您可以做到这一点，

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

但是尽管这不是一个好习惯。您应该拥有一个列出所有动漫的页面，当用户单击单个动漫时，您应该有一个单独的页面，这将有助于采用更确定性的方法。

Answer 3

您正在尝试 MAP 对象不是 array 是不可能的。如果要获取所有 People 信息，则应从 api 呼叫中删除 ID ，则可以正常工作。

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

这是没有 ID https://codesandbox.io/embed/thirsty-feistel-yjs6my?fontsize = 14＆amp;hidenavigation=1＆amp;theme=dark 。

相反，如果要使用单人对象，只需删除 MAP 零件