Javascript TypeError:无法读取属性'；地图'；尝试访问API调用数据时未定义的

我正在尝试使用React制作一个电影搜索应用程序，并对电影数据库API进行了API调用。我有这个表格，我想做的是获取我正在搜索的电影的数据

我无法访问API调用中的数据，并且出现了“UncaughtTypeError:无法读取未定义的属性'map'的错误”

我有两个js文件： 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'));

从“React”导入React；
从“react dom”导入react dom；
从“/SearchMovies”导入SearchMovies；
导入“/style.css”；
类Main扩展了React.Component{
render（）{
返回(
React电影搜索
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

第二个文件是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>
    )
}

import React，{useState}来自“React”；
导出默认函数SearchMovies（）{
//状态-输入查询，电影
const[query，setQuery]=useState（“”）；
const[movies，setMovies]=useState（[]）；
const searchMovies=async（e）=>{
e、 预防默认值（）；
常量url=`https://api.themoviedb.org/3/movie/550? 
api\u key=api\u key&language=en-US&query=${query}&page=1&
包括成人=假`；
试一试{
const res=等待获取（url）；
const data=wait res.json（）；
setMovies（data.results）；
}捕捉（错误）{
控制台错误（err）；
}
}
返回(
电影名称
setQuery（e.target.value）}
/>
搜寻
{movies.map（movie=>(
))}
)
}

有人能告诉我我做错了什么吗？我是新来的。 非常感谢

首先， 永远不要在互联网上共享您的个人api密钥

 const data  = await res.json();

既然已经获取了数据，为什么还要再次使用wait？ 另外，如果响应是json，则为json.parse（res）

接下来，您是否确实查看了您获得的数据？ 尝试用控制台记录它。 据我所知，它是一个对象，不是数组，所以你不能使用map。

首先， 永远不要在互联网上共享您的个人api密钥

 const data  = await res.json();

既然已经获取了数据，为什么还要再次使用wait？ 另外，如果响应是json，则为json.parse（res）

接下来，您是否确实查看了您获得的数据？ 尝试用控制台记录它。

---

据我所知，它是一个对象，而不是数组，因此您不能使用map。

您的API响应是一个对象，而不是数组，这就是map函数无法工作的原因

请参阅您的API响应：

---

{“成人”：假，“背景路径”：“/rr7E0NoGKxvbkb89eR1GwfoYjpA.jpg”，“属于收藏”：空，“预算”：63000000，“类型”：[{“id”：18，“名称”：“戏剧”}]，“主页”：http://www.foxmovies.com/movies/fight-club“，”id“：550，“imdb_id:”tt0137523“，”原语言“：”en“，”原标题“：”搏击俱乐部“，”概述“：“一个滴答作响的定时炸弹失眠症患者和一个狡猾的肥皂推销员将原始男性的攻击性引入了一种令人震惊的新疗法。他们的概念流行起来，每个城镇都有地下“搏击俱乐部”，直到一个怪人挡道，点燃了一个失控的螺旋，走向遗忘。”，“流行”：46.801，“海报路径”：/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg，“生产公司”：[{“id”：508，“logo_path”：“/7PzJdsLGlR7oW4J0J5Xcd0pHGRg.png”，“名称”：“摄政企业”，“原产地国家”：“美国”}，{“id”：711，“logo_path”：“/TEIIH5QESDHEDHEJMDAQWVTN60727.png”，“名称”：“福克斯2000图片”，“原产地国家”：“美国”；“id”：20555，“logo_path”：“/HD8YEGUBLHOCFHYGZ7P.png”：“png”金牛座电影，原籍国：“{”id“：54051，“logo_path”：null，“name”：“Atman Entertainment”，“origin_country”：“}，{”id“：54052，“logo_path”：null，“name”：“尼克博克电影”，“origin_country”：“US”}，{”id“：25，“logo_path”：“/qZCc1lty5FzX30aOCVRBLzaVmcp.png”，“name”：“20世纪福克斯”，“origin_country”：“US”；“US”{”id“：4700，“logo_path”：/A32wmjrs9Psf4zw0uaixF0GXfxq.png，“名称”：“林森公司”、“原产国”：“}]，“生产国”：[{“iso_3166_1”：“DE”，“名称”：“德国”}，{“iso_3166_1”：“美国”}]，“发布日期”：“1999-10-15”，“收入”：100853753，“运行时间”：139，“口语”：[{“iso_639_1”：“en”，“名称”：“英语”}]，“发布状态”，“标语”：恶作剧.混乱.肥皂.，“标题”：“搏击俱乐部”，“视频”：false，“投票平均数”：8.4，“投票计数”：20153}

您的API响应是一个对象，而不是一个数组，这就是map函数无法工作的原因

请参阅您的API响应：

{“成人”：假，“背景路径”：“/rr7E0NoGKxvbkb89eR1GwfoYjpA.jpg”，“属于收藏”：空，“预算”：63000000，“类型”：[{“id”：18，“名称”：“戏剧”}]，“主页”：http://www.foxmovies.com/movies/fight-club“，”id“：550，“imdb_id:”tt0137523“，”原语言“：”en“，”原标题“：”搏击俱乐部“，”概述“：”一个滴答作响的定时炸弹失眠症患者和一个狡猾的肥皂推销员将原始男性的攻击性引入了一种令人震惊的新疗法。他们的理念开始流行，每个城镇都有地下“搏击俱乐部”，直到一个怪人挡道，点燃了一个失控的螺旋，走向遗忘。”，“流行”：46.801，“海报路径”：”/pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg，“生产公司”：[{“id”：508，“logo_path”：“/7PzJdsLGlR7oW4J0J5Xcd0pHGRg.png”，“名称”：“摄政企业”，“原产地国家”：“美国”}，{“id”：711，“logo_path”：“/TEIIH5QESDHEDHEJMDAQWVTN60727.png”，“名称”：“福克斯2000图片”，“原产地国家”：“美国”；“id”：20555，“logo_path”：“/HD8YEGUBLHOCFHYGZ7P.png”：“png”金牛座电影，原籍国：“{”id“：54051，“logo_path”：null，“name”：“Atman Entertainment”，“origin_country”：“}，{”id“：54052，“logo_path”：null，“name”：“尼克博克电影”，“origin_country”：“US”}，{”id“：25，“logo_path”：“/qZCc1lty5FzX30aOCVRBLzaVmcp.png”，“name”：“20世纪福克斯”，“origin_country”：“US”；“US”{”id“：4700，“logo_path”：/A32wmjrs9Psf4zw0uaixF0GXfxq.png，“名称”：“林森公司”、“原产国”：“}]，“生产国”：[{“iso_3166_1”：“DE”，“名称”：“德国”}，{“iso_3166_1”

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