Soy un principiante en la codificación. Tratando de aprender a reaccionar. Traté de crear un clon de Netflix. Mientras trato de renderizar imágenes para diferentes categorías de películas, no se muestra en el navegador. Y la consola muestra el siguiente error:
No capturado (en promesa) TypeError: no se pueden leer las propiedades de undefined (leyendo 'protocolo')
import './App.css'; import Nav from './Nav'; import Banner from './Banner' import Row from './Row'; import requests from './requests'; function App() { return ( <div className="app"> <Nav/> <Banner/> <Row/> <Row title= {requests.fetchNetflixOriginals} isLargeRow={true} /> <Row title="Trending Now" fetchurl={requests.fetchTrending} /> <Row title="Top Rated" fetchurl={requests.fetchTopRated} /> <Row title="Action Movies" fetchurl={requests.fetchActionMovies} /> <Row title="Comedy Movies" fetchurl={requests.fetchComedyMovies} /> <Row title="Horror Movies" fetchurl={requests.fetchHorrorMovies} /> <Row title="Documentaries" fetchurl={requests.fetchDocumentaries} /> </div> ); } export default App; import React, {useState,useEffect} from 'react'; import './Row.css' import axios from 'axios' import YouTube from 'react-youtube' import movietrailer from 'movie-trailer' function Row({title, fetchurl, isLargeRow}) { const base_url= "https://image.tmdb.org/t/p/original/"; const[movies, setMovies]= useState([]); const[trailerurl, setTrailerurl]= useState(""); useEffect(()=> { async function fetchData() { const request = await axios.get(fetchurl); setMovies(request.data.results); return request; } fetchData(); }, [fetchurl]); return ( <div className="row"> <h2>{title}</h2> <div className="row__posters"> {movies.map((movie) => ( <img src={`${base_url}${ isLargeRow ? movie.poster_path : movie.backdrop_path }`} alt={movie.name} /> ))} </div> </div> ) } export default RowPuede colocar console.log(request) justo después de const request = ... para verificar.
El error ocurre en promesa cuando algo no puede obtener respuesta después de solicitar. En función de promesa siempre espera respuesta o rechazo. Allí, en su código, está la función de promesa en la función useEffect at Row,
async function fetchData() { const request = await axios.get(fetchurl); setMovies(request.data.results); return request; } Como solicitud de solicitud de función de promesa ( axios.get(fetchurl) ), espera respuesta o rechazo. Ya sea respuesta o rechazo, el código se ejecutará tal como está codificado. En el código, después de solicitar, continúa con setMovies(request.data.results) con el resultado. Pero si el resultado no está undefined , entonces da error. Para que pueda manejar si el error ocurre con el código. O puede comprobar el error. Puede colocar console.log(request) justo después de const request = ... .
Puede buscar dónde está el protocolo, encontrar por qué no está definido.