在 React 中使用 API 信息映射元素

Question

我正在开发一个带有电影 API (https://developers.themoviedb.org) 的反应应用程序。问题是我正试图将来自 API 的信息放入卡片中。我为此使用 useState 和 useEffect 。另外，我使用 Axios 从 API 中获取它。我不知道，我看不出什么不起作用。错误消息是 map 不是函数，但我相信我的 useEffect 有问题。请帮忙！

const Home = () => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    axios.get("https://api.themoviedb.org/3/trending/movie/week?api_key=**APIKEY**")
      .then(res => {
        setMovies(res.data);

      }).catch(console.log)
  },
    []
  );


  return (
    <section id="main-page">
      <div className='list-main-page'>
        <a href='#'>
          <h2>
            Películas que son tendencia
            <FontAwesomeIcon className='arrow-list' icon={faArrowRight} />
          </h2>
        </a>
        <div className='card-list-container'>

        {movies.map((movie, i) => {
            return (
              <Card key={i} image={movie.poster_path} />
            )})
          }

        </div>
      </div>
    </section>
  )
};

export default Home;

Answer 1

首先，您不应该像那样公开发布您的 api 密钥。

您应该对从公共 API 返回的表单感到满意。

{
   "page": 1,
   "results": [...],
   "total_pages": 1000,
   "total_results": 20000
}

在这里我们可以看到res.data 的结果。我们可以像使用 Javascript 对象一样使用它，因为 Axios 会为我们转换这个 JSON。 （您也可以自己使用 JSON.parse() 进行转换）

您要查找的实际movies 封装在数据中的result 数组中。在您的尝试中，您尝试将结果对象 map（它是来自数组的函数），这显然不是一个数组，因此您面临的错误。

要解决此问题，您必须将 result 保存在您的状态中

setMovies(res.data.results);

Answer 2

你应该像这样使用代码：

setMovies(res.data.results);

Answer 3

来自 api 的数据以对象 {"page":1, "results":[...]} 的形式出现，因此要在您的状态下设置电影的数组，您应该按如下方式访问结果数组；

  useEffect(() => {
    axios.get("https://api.themoviedb.org/3/trending/movie/week?api_key=API_KEY")
      .then(res => {
        setMovies(res.data.results);

      }).catch(error  => 
         console.log(error)
      )
  },
    []
  );

避免发布您的 API 密钥

Answer 4

这是因为 response 的值在 res.data.results 内。所以你只需要改变：

setMovies(res.data);

到：

setMovies(res.data.results);

如果您使用的是 typescript 项目，也可以通过接口映射您想要的 api 属性：

// just an examples of some properties
interface MoviesProps {
  id: number;
  video: boolean;
  vote_count: number;
  title: string;
}

并将您的状态设置为：

const [movies, setMovies] = useState<MoviesProps[]>([]);