Reactjs 反应：尝试从MovieDB API获取资源时出现NetworkError

我需要从MovieDB API中获取数据，我已经将代码设置到我只想在点击搜索按钮后返回一些数据的位置。但是，当我点击搜索按钮时，我在尝试获取资源时返回

NetworkError

到目前为止，我的代码包括以下内容

    import React, {useEffect, useState} from 'react';
import './App.css';


const App = () => {
  const API_KEY = '664e565dee7eaa6ef924c41133a22b63';

  const [movies, setMovies] = useState([]);
  const [query, setQuery] = useState("");

  useEffect(() => {
    async function getMovies(){
      const response = await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=${query}`)
      const data = await response.json()
      console.log(data.results)
      setMovies(data.results)
    }
    if(query !== "") getMovies();

  }, [query])


  return (
   <div>
     <form>

       <button onClick={() => setQuery("Avengers")}type="submit">Search</button>
       <p>{JSON.stringify(movies)}</p>
     </form>
   </div>
  );
}

export default App;

import React，{useffect，useState}来自“React”；
导入“/App.css”；
常量应用=（）=>{
常量API_KEY='664e565dee7eaa6ef924c41133a22b63'；
const[movies，setMovies]=useState（[]）；
const[query，setQuery]=useState（“”）；
useffect（（）=>{
异步函数getMovies（）{
const response=等待获取(`https://api.themoviedb.org/3/search/movie?api_key=${API\u KEY}&language=en-US&query=${query}`）
const data=wait response.json（）
console.log（data.results）
setMovies（data.results）
}
如果（查询！==“”）getMovies（）；
}，[查询]）
返回(
setQuery（“复仇者”）}type=“提交”>搜索
{JSON.stringify（电影）}

);
}
导出默认应用程序；

如果使用（和query='Avengers'）：

在API URL中，您可以看到以下内容（每条记录都与复仇者电影相关）

---

试试这个-它不包括您需要的更高级的功能。 但这是构建下一个功能的良好基础：

import React, { useEffect, useState } from 'react';


    const App2 = () => {
        const API_KEY = '664e565dee7eaa6ef924c41133a22b63';

        const [movies, setMovies] = useState([]);
        const [query, setQuery] = useState('Avengers');

        useEffect(() => {
            async function getMovies(query) {
                await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=$query`)
                    .then(data => data.json())
                    .then(data => {
                        console.log(data.results)
                        const result = data.results.map(obj => ({ popularity: obj.popularity, id: obj.id }));
                        console.log(result)
                        setMovies(result)
                        console.log(movies)
                    })
            }
            getMovies()
        }, [query])

        return (
            <div>
                {movies.map((movie, key) => (
                    <div key={key}>
                        <h1> {movie.popularity}</h1>
                        <h1>{movie.id}</h1>
                    </div>
                ))}
            </div>
        );
    }

    export default App2;

import React，{useffect，useState}来自“React”；
常量App2=（）=>{
常量API_KEY='664e565dee7eaa6ef924c41133a22b63'；
const[movies，setMovies]=useState（[]）；
const[query，setQuery]=useState（'Avengers'）；
useffect（（）=>{
异步函数getMovies（查询）{
待命(`https://api.themoviedb.org/3/search/movie?api_key=${API\u KEY}&language=en-US&query=$query`）
.then（data=>data.json（））
。然后（数据=>{
console.log（data.results）
const result=data.results.map（obj=>（{popularity:obj.popularity，id:obj.id}））；
console.log（结果）
赛特电影（结果）
console.log（电影）
})
}
getMovies（）
}，[查询]）
返回(
{movies.map（（movie，key）=>(
{电影，人气}
{movie.id}
))}
);
}
导出默认App2；

---

这是API中的模式（数组中只有一个对象）（我只使用了id&流行性）-可以使用您想要的：

import React, { useEffect, useState } from 'react';


    const App2 = () => {
        const API_KEY = '664e565dee7eaa6ef924c41133a22b63';

        const [movies, setMovies] = useState([]);
        const [query, setQuery] = useState('Avengers');

        useEffect(() => {
            async function getMovies(query) {
                await fetch(`https://api.themoviedb.org/3/search/movie?api_key=${API_KEY}&language=en-US&query=$query`)
                    .then(data => data.json())
                    .then(data => {
                        console.log(data.results)
                        const result = data.results.map(obj => ({ popularity: obj.popularity, id: obj.id }));
                        console.log(result)
                        setMovies(result)
                        console.log(movies)
                    })
            }
            getMovies()
        }, [query])

        return (
            <div>
                {movies.map((movie, key) => (
                    <div key={key}>
                        <h1> {movie.popularity}</h1>
                        <h1>{movie.id}</h1>
                    </div>
                ))}
            </div>
        );
    }

    export default App2;