如何从 themoviedb 获取所有电影的数组？

Question

我不明白如何在一个数组中显示所有电影。在控制台中：

'index.jsx:14 GET https://api.themoviedb.org/3/movie/undefined?api_key=66eb3bde9cca0487f03e78b512b451e4 404
{success: false, status_code: 34, status_message: 'The resource you requested could not be found.'}'

我的代码如下：

import axios from "axios";
import React, { useEffect, useState } from "react";

const Main = () => {

    const [recipes, setRecipes] = useState([]);

    useEffect(() => {
        getRecipes()
    },[])

    const getRecipes = async (id) => {
        const response = await fetch(
          `https://api.themoviedb.org/3/movie/${id}?api_key=66eb3bde9cca0487f03e78b512b451e4`
        );
        const data = await response.json()
        setRecipes(data.id)
        console.log(data)
    }
      
    return(
        <main></main>
    )
}

export default Main;

Answer 1

您没有向 getRecipes 函数发送 id，所以它会导致错误， 因为 id 在你的函数中是未定义的。

 useEffect(() => {
    getRecipes("2") //Here you should pass the id
},[])

而且，你导入了 axios 却没有使用它。

    const getRecipes = async (id) => {
    const response = await axios.get(`https://api.themoviedb.org/3/movie/${id}?api_key=66eb3bde9cca0487f03e78b512b451e4`);
    const data = response.data;
    console.log(data);
}

Answer 2

我假设您正在寻找所有电影列表，而不是电影数据。如果这就是你的意思，那么：-

在 tmdb 文档中，您可以发现电影，docs.

import axios from "axios";
import React, { useEffect, useState } from "react";

const Main = () => {

    const [recipes, setRecipes] = useState([]);

    useEffect(() => {
        getRecipes()
    },[])

    const getRecipes = async () => {
        const response = await fetch(
          `https://api.themoviedb.org/3/discover/movie?api_key=<your_api_key>`
        );
        const data = await response.json()
        setRecipes(data.results) // `results` from the tmdb docs
        console.log(data)
    }
      
    return(
        <main></main>
    )
}

export default Main;