Реагируйте: NetworkError при попытке извлечь ресурс из MovieDB API

Question

Мне нужно получить данные из API MovieDB, и у меня есть настройки кода, куда я просто хочу вернуть некоторые данные после нажатия кнопки поиска. Но когда я нажимаю кнопку поиска, я возвращаюсь NetworkError when attempting to fetch resource Мой код до сих пор состоит из этого

    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;

Answer 1

Если использовать (и запрос = 'Мстители'):

${query}`

в URL-адресе API, вы получите это (каждая запись основана на мстителях mov ie)

---

Попробуйте это - это не включает более продвинутые функции, которые вам нужны. Но это хорошо для создания следующих функций:

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;

---

Вот ваша схема из API (только 1 объект в массиве) (я использовал только id & популярность ) - можно использовать то, что вы будете sh: