javascript - TypeError:当我尝试访问 API 调用数据时,无法读取未定义的属性“地图”
问题描述
我正在尝试使用 React 制作电影搜索应用程序,并对电影数据库 API 进行了 API 调用。我有这个表格,我想做的是获取我正在搜索的电影的数据。
我无法从 API 调用中访问数据,并且收到“未捕获的类型错误:无法读取未定义的属性 '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'));
第二个文件是 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>
)
}
有人可以告诉我我在这里做错了什么吗?我是 React 的新手。非常感谢!
解决方案
您的 API 响应一个对象,而不是一个数组,这就是 map 函数不起作用的原因。
查看您的 API 响应:
{"adult":false,"backdrop_path":"/rr7E0NoGKxvbkb89eR1GwfoYjpA.jpg","belongs_to_collection":null,"budget":63000000,"genres":[{"id":18,"name":"戏剧"} ],"主页":"http://www.foxmovies.com/movies/fight-club","id":550,"imdb_id":"tt0137523","original_language":"en","original_title": “搏击俱乐部”,“概述”:“定时炸弹失眠症患者和狡猾的肥皂推销员将原始男性的攻击性转化为令人震惊的新疗法。他们的概念流行起来,每个城镇都形成了地下“搏击俱乐部”,直到一个古怪的人挡道并点燃一个失控的螺旋走向遗忘。","流行度":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_country":"DE"},{"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":"20th Century Fox","origin_country":"US"}, {"id":4700,"logo_path":"/A32wmjrs9Psf4zw0uaixF0GXfxq.png","name":"林森公司","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":"已发布","标语":"恶作剧。混乱。肥皂。","title":"搏击俱乐部","video":false,"vote_average":8.4,"vote_count":20153}
推荐阅读
- css - 如何解决仅在 Safari Mobile 中出现的 CSS 问题?
- python - 如何在读取文件但删除一个变量然后替换它时删除“\n”字符
- flutter - 无法设置回调函数。错误说:“DropDown”必须有一个方法体,因为“ListLayout”不是抽象的
- android - 如何在apache cordova中完成页面滑动
- django - serializer.save() 不将数据保存到管理数据库
- flutter - (使用不包含 MediaQuery 的上下文调用 MediaQuery.of()。)错误
- sql - 如何在 BigQuery 中编写以下 SQL 查询
- python - 迭代到递归格式
- apache-spark - 在完成的 Spark 作业中“失败”是什么意思?
- sql - 从字符串的开头到结尾替换