類型錯誤：當我嘗試訪問 API 調用數據時，無法讀取未定義的屬性“映射”

Question

我正在嘗試使用 React 制作電影搜索應用程序，並已對電影數據庫 API 進行了 API 調用。 我有這個表格，我想要做的是獲取我正在搜索的電影的數據。

我無法從 API 調用訪問數據，並且收到“未捕獲的類型錯誤：無法讀取未定義的屬性‘地圖’”的錯誤消息

我有兩個 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 響應：

{"成人":false,"backdrop_path":"/rr7E0NoGKxvbkb89eR1GwfoYjpA.jpg","belongs_to_collection":null,"budget":63000000,"genres":[{"id":18,"name":"Drama"} ],"主頁":"http://www.foxmovies.com/movies/fight-club","id":550,"imdb_id":"tt0137523","original_language":"en","original_title": “搏擊俱樂部”，“概述”：“一個定時炸彈失眠症和一個狡猾的肥皂推銷員將原始男性侵略轉化為一種令人震驚的新療法。他們的概念流行起來，每個城鎮都形成了地下“搏擊俱樂部”，直到一個古怪的人擋道並點燃了一個失控的螺旋走向遺忘。","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":"/tEiH5QesdheJmDAq7wv7"png"png"png" :"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 . 混亂。 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。