Question

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

我无法通过API调用访问数据，并且收到以下错误消息：“未捕获的TypeError：无法读取未定义的属性'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的新手。非常感谢！

Answer 1

您的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”，“原始语言”：“ en”，“ original_title“：”搏击俱乐部“，”概述“：”滴答定时炸弹失眠症和一名滑溜溜的肥皂推销员将原始的男性侵略引导到一种令人震惊的新疗法中。他们的概念不断发展，并形成了地下“搏击俱乐部”。每个城镇，直到一个古怪的人挡住了路，并点燃了无法控制的螺旋式走向遗忘的状态。“，”人气“：46.801，”海报路径“：” / pB8BM7pdSp6B6Ih7QZ4DrQ3PmJK.jpg“，” production_companies“：[{” id“ ：508，“ logo_path”：“ / 7PzJdsLGlR7oW4J0J5Xcd0pHGRg.png”，“名称”：“ Regency Enterprises”，“ origin_country”：“ US”}，{“ id”：711，“ logo_path”：“ // tEiIH5QesdheJmDAqQwv” N60727。 “ name”：“ Fox 2000 Pictures”，“ origin_country”：“ US”}，{“ id”：20555，“ logo_path”：“ / hD8yEGUBlHOcfHYbujp71vD8gZp.png”，“ name”：“ Taurus电影”，“ origin_ country“：” DE“}，{” id“：54051，” logo_path“：null，” name“：” Atman Entertainment“，” origin_country“：”“}，{” id“：54052，” logo_path“：null ，“名称”：“尼克博克电影”，“ origin_country”：“ US”}，{“ id”：25，“ logo_path”：“ / qZCc1lty5FzX30aOCVRBLzaVmcp.png”，“名称”：“ 20世纪福克斯”，“ origin_country” ：“” US“}，{” id“：4700，” logo_path“：” / A32wmjrs9Psf4zw0uaixF0GXfxq.png“，”名称“：” The Linson Company“，” origin_country“：”“}]，” production_countries“：[{” iso_3166_1“：” DE“，”名称“：”德国“}，{” iso_3166_1“：” US“，”名称“：”美利坚合众国“}]，”发布日期“：” 1999-10-15“， “ revenue”：100853753，“ runtime”：139，“ spoken_languages”：[{“ iso_639_1”：“ en”，“ name”：“ English”}]，“ status”：“ Released”，“ tagline”：“ Mischief 。混乱。 Soap。“，” title“：” Fight Club“，” video“：false，” vote_average“：8.4，” vote_count“：20153}

Answer 2

我用您的代码进行了jsfiddle测试：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`;

此代码无效。您不能在URL中添加换行符。

通过更改为这一点，我得以使其工作：

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

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

 const data  = await res.json();

为什么已经获取数据后再次使用await？同样，如果响应为json，则为JSON.parse（res）。

接下来，您是否真正查看了所获取的数据？尝试控制台记录它。据我所知，它是一个对象，而不是数组，因此您不能使用map。

TypeError：当我尝试访问API调用数据时，无法读取未定义的属性“ map”

3 个答案: