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.