Поддержка The Movie Database

I am working with an api with movie react, I want to get the details of each movie but I don't get any results.

import React, { useEffect, useState ,useParams} from "react";
import { Routes,Route,Link } from 'react-router-dom'



//"
const Peliculas = () => {

const [popular, setPopular] = useState([]);


const fetchPopular = async  () => {
  const url =
  "
get popular movies"
  const data = await fetch(url);
    const movies = await data.json();
    setPopular(movies.results);
    //console.log(movies.results)
  };
  useEffect(() => {
    fetchPopular();
  }, []);

  return (
    <>
        <h2>pelis</h2>

        <ul>
          {popular.map(img =>
          <li key={img.id}><h3>{img.title}</h3><br/><Link to={"/detalles/"+img.id}>
           <img src={ "https://image.tmdb.org/t/p/w500"+ img.poster_path} alt={img.title}/>/</Link></li>)}          
        </ul>    
        </>
    )
  }
  const Detalle = () => {
    const [informacion , setInformacion] = useState();
    let {id} = useParams()
  const  fetchInformacion = () =>{  
      fetch('
get popular movies'+id)
        .then(response => response.json())
        .then(info => setInformacion(info))
        .catch(err => console.log(err.message))
        console.log(informacion.results)


  }
  useEffect(() => {
    fetchInformacion()

})
return (  
  <>
  { 
  informacion&&
  <section>
    <h1>{informacion.title}</h1>
    <img src={ informacion.poster_path} alt={informacion.title}/>        

    <p>Estreno :{informacion.release_date}</p>
    <p>Ranking {informacion.popularity}</p>

    <p><Link to="/">Regresar a la home</Link></p>
  </section>    
  }
  </>  
)
  }
 const App = () => (
  <>

      <Routes>
          <Route exact path="/" element={<Peliculas/>}/> 
          <Route exact path="/detalles/id" element={<Detalle/>}/>

      </Routes>        
  </>
); 

export default App;

2 ответов (на странице 1 из 1)

Jump to last post

I don't understand anything about programming code.
But I think we can get more attention from someone who understands
if we add the name of the tool in the title of this conversation.

I believe you are doing something wrong. I recommend fetching your data with axios. try the way below:

import axios from 'axios'
const url = [the API]
const [data, setData] = useState()

  useEffect(()=>{
    axios.get(`${url}`)
      .then(response => {
        setData(response.data)
      })
      .catch(error => {
        console.error(error)
      })
  }, [])  

Also try to log it to check if you get the data correct. This should work properly. if you could console.log the data, then there should be no problem, the issue would be with the method you are using to show them. Best.

Не можете найти фильм или сериал? Войдите на сайт, чтобы добавить его.

Глобальные

s фокусироваться на панели поиска
p открыть меню профиля
esc закрыть открытое окно
? открыть окно сочетаний клавиш

На страницах медиа

b назад (или выше, если применимо)
e перейти на страницу правки

На страницах сезонов

(стрелка вправо) перейти к следующему сезону
(стрелка влево) перейти к предыдущему сезону

На страницах эпизодов

(стрелка вправо) перейти к следующему эпизоду
(стрелка влево) перейти к предыдущему эпизоду

На всех страницах изображений

a открыть окно добавления изображения

На всех страницах правки

t открыть переключатель переводов
ctrl+ s отправить форму

На страницах обсуждения

n создать новое обсуждение
w сменить статус отслеживания
p публичное/приватное
c закрыть/открыть
a открыть страницу действий
r ответить в обсуждении
l перейти к последнему ответу
ctrl+ enter отправить своё сообщение
(стрелка вправо) следующая страница
(стрелка влево) предыдущая страница

Параметры

Хотите поставить оценку или добавить в список?

Войти