• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

624
Views
La variable en React no está definida en el primer renderizado, pero se define después de volver a renderizar. (TypeError no capturado: vairable no está definido)

Cuando trato de mostrar el título de una película (línea 8 de App.js), aparece el error "Error de tipo no detectado: las películas [0] no están definidas". Si hago un registro de la variable "películas" después de la línea 5, la consola hace dos registros: Primero, registra películas como una matriz vacía y luego registra películas como una matriz con todo el contenido, como quiero.

Lo extraño es que si elimino la línea 8 {movies[0].title} y guardo, el error desaparece normalmente, pero luego, si lo vuelvo a agregar y guardo, el título de la película aparece en la pantalla como estoy tratando de hacer.

Aplicación.js:

 import './App.css'; import useApi from './useApi'; function App() { const movies = useApi(); return ( <div className="App"> {movies[0].title} </div> ); } export default App;

Mi useApi devuelve una matriz con una lista de películas:

 import axios from 'axios'; import { useState, useEffect } from 'react'; const useApi = () => { const [movies, setMovies] = useState([]); const getData = async () => { try { const res = await axios(url); setMovies(res.data.results); } catch (error) { return []; } } useEffect(() => { getData(); }, []) return movies; } export default useApi;

Sabiendo que si imprimo películas, registra una matriz vacía pero luego las imprime normalmente como dije, supongo que tengo un problema con la asincronía pero no puedo entender qué. Y el hecho de que funcione al quitar y leer la línea 8 me confunde más.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Es posible que desee utilizar la noción de representación condicional. Algo como esto puede funcionar:

 import './App.css'; import useApi from './useApi'; function App() { const movies = useApi(); if (movies.length) { // conditionally render when the movie list is not empty return ( <div className="App"> {movies[0].title} </div> ); } return <div>Loading...</div> } export default App;
almost 3 years ago · Juan Pablo Isaza Report

0

Porque su función getData() se procesa dos veces en el gancho useEffects . ¡Debe verificar if(movies.length>0) y después de eso, escriba return!

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error