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.
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;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!