类型错误：当我尝试访问 API 调用数据时，无法读取未定义的属性“映射”

Question

I am trying to make a movie search app with React and have made an API call to The Movie Database API. I have this form and what I am trying to do is get the data of the movie that I am searching for.

I am not able to access the data from the API call, and I get this error of "Uncaught TypeError: Cannot read property 'map' of undefined"

I have two js files: 1 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import SearchMovies from "./searchMovies";
import './style.css';

class Main extends React.Component {
  render() {
    return (
      <div className="container">
        <h1 className="title">React Movie Search</h1>
        <SearchMovies/>
      </div>
  
    );
  }
}

ReactDOM.render(<Main />, document.getElementById('root'));

The second file is searchMovies.js

import React, {useState} from "react";

export default function SearchMovies(){

//states- input query, movies
const [query, setQuery] = useState('');
const [movies, setMovies] = useState([]);

const searchMovies = async (e) => {
    e.preventDefault();
    
    const url = `https://api.themoviedb.org/3/movie/550? 
    api_key=api_key&language=en-US&query=${query}&page=1&
        include_adult=false`;

        try {
            const res = await fetch(url);
            const data  = await res.json();
            setMovies(data.results);
        }catch(err){
            console.error(err);
        }
}


return(
    <div>
        <form className="form" onSubmit={searchMovies}>
            <label htmlFor="query" className="Label">Movie Name</label>

            <input className="input" type="text" name="query" placeholder="i.e. Jurassic 
                Park"
                value={query} onChange={(e) => setQuery(e.target.value)}
            />

            <button className="button" type="submit">Search</button>
        </form>
        <div className="card-list">
            {movies.map(movie => (
                <div className="card">
                    <img className="card--image"
                        src={`https://image.tmdb.org/t/p/w185_and_h278_bestv2/
                        ${movie.poster_path}`}
                        alt={movie.title + ' poster'}
                        />

                </div>
            ))}
        </div>
      </div>
    )
}

Can somebody tell me what I am doing wrong here? I am new to React. Many thanks!

Answer 1

Your API response an object, not an array that's why the map function not working.

See Your API response:

{"adult":false,"backdrop_path":"/rr7E0NoGKxvbkb89eR1GwfoYjpA.jpg","belongs_to_collection":null,"budget":63000000,"genres":[{"id":18,"name":"Drama"}],"homepage":"http://www.foxmovies.com/movies/fight-club","id":550,"imdb_id":"tt0137523","original_language":"en","original_title":"Fight Club","overview":"A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground "fight clubs" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion.","popularity":46.801,"poster_path":"/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg","production_companies":[{"id":508,"logo_path":"/7PzJdsLGlR7oW4J0J5Xcd0pHGRg.png","name":"Regency Enterprises","origin_country":"US"},{"id":711,"logo_path":"/tEiIH5QesdheJmDAqQwvtN60727.png","name":"Fox 2000 Pictures","origin_country":"US"},{"id":20555,"logo_path":"/hD8yEGUBlHOcfHYbujp71vD8gZp.png","name":"Taurus Film","origin_cou ntry":"DE"},{"id":54051,"logo_path":null,"name":"Atman Entertainment","origin_country":""},{"id":54052,"logo_path":null,"name":"Knickerbocker Films","origin_country":"US"},{"id":25,"logo_path":"/qZCc1lty5FzX30aOCVRBLzaVmcp.png","name":"20th Century Fox","origin_country":"US"},{"id":4700,"logo_path":"/A32wmjrs9Psf4zw0uaixF0GXfxq.png","name":"The Linson Company","origin_country":""}],"production_countries":[{"iso_3166_1":"DE","name":"Germany"},{"iso_3166_1":"US","name":"United States of America"}],"release_date":"1999-10-15","revenue":100853753,"runtime":139,"spoken_languages":[{"iso_639_1":"en","name":"English"}],"status":"Released","tagline":"Mischief. Mayhem. Soap.","title":"Fight Club","video":false,"vote_average":8.4,"vote_count":20153}

Answer 2

I made a jsfiddle with your code for testing: https://jsfiddle.net/hqm6rcpf/

const url = `https://api.themoviedb.org/3/movie/550? 
    api_key=api_key&language=en-US&query=${query}&page=1&
        include_adult=false`;

This code is invalid. You cannot add line breaks in a URL.

By changing to this, I was able to make it work:

const url = `https://api.themoviedb.org/3/search/movie?api_key=api_key&language=en-US&query=${query}&page=1&include_adult=false`;

Answer 3

first of all, never share your personal api key on the internet!!

 const data  = await res.json();

Why use await again when you have already fetched the data? also, if the response is json, it's JSON.parse(res).

Next, have you actually looked at the data you are getting? Try console logging it. From what I can tell, it's an object, not an array, so you can't use map.