时间戳

首页 > 解决方案 > TMDB API 元素未显示在屏幕上 - React

javascript - TMDB API 元素未显示在屏幕上 - React

问题描述

我正在使用 TMDB，我正在尝试显示评分最高的电影的图片（海报），但它没有显示任何内容。在控制台中，我检查是否有元素并且有但没有显示任何内容。我按照此视频进行指导，但我不知道为什么它对我不起作用：https ://www.youtube.com/watch?v=sZ0bZGfg_m4

这是我当前的代码：

应用程序.js：

import {useEffect, useState} from 'react';
import './App.css';
import Movie from './components/Movie';

//due to it being a demo project I will not safe keep the API
const API ="https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=89eef3426d167c3c8145a257ebe68357&page=1";
const SEARCH_API="https://api.themoviedb.org/3/search/movie?api_key=89eef3426d167c3c8145a257ebe68357&query=";
const TOP_RATED_API="https://api.themoviedb.org/3/movie/top_rated?api_key=89eef3426d167c3c8145a257ebe68357&page=1"

function App() {
  const [movies, setMovies] = useState([]);

useEffect(()=>{
  fetch(TOP_RATED_API)
  .then((res)=>res.json())
  .then((data)=>{
    console.log(data);
    setMovies(data.result);
  });

},[]);

  
 
  return <div>{movies?.length > 0 && movies.map((movie)=>
  <Movie key={movie.id} {...movie}/>
  )}</div>
  
 
}

export default App;

和 Movie.js：

import React from "react";
const IMG_API="https://image.tmdb.org/t/p/w500/";

const Movie =({title, backdrop_path, vote_average})=>
(
    <div>
        <img src={IMG_API+backdrop_path} alt={title}/>
    </div>
);


export default Movie;

更改 App.js 中的最后一部分后 ->

return <div>{movies?.length > 0 && movies.map((movie)=>
      <Movie key={movie.id} {...movie}/>
      )}</div>

对此（删除？电影后）

return <div>{movies.length > 0 && movies.map((movie)=>
          <Movie key={movie.id} {...movie}/>
          )}</div>

它显示一个错误：

TypeError: Cannot read property 'length' of undefined

任何帮助都会很棒，在此先感谢：D

标签： javascriptreactjs

解决方案

这是一个错字，它是 data.results 而不是 data.result

useEffect(()=>{


fetch(TOP_RATED_API)
  .then((res)=>res.json())
  .then((data)=>{
    console.log(data);
    setMovies(data.results);
  });

},[]);

推荐阅读