Estoy tratando de obtener datos de una API, The Movie Database, para lo cual estoy usando React (versión 18) y axios (versión 0.27.2). La pregunta es que cuando tomo los datos, y setState está listo. comienza un ciclo infinito que no termina. Comparto código para una mejor comprensión.
import { useEffect, useState } from "react" import { useNavigate } from "react-router-dom" import axios from 'axios' function Listado() { const [movieList, setMovieList] = useState([]) const navigate = useNavigate() useEffect(() => { const token = localStorage.getItem('token') console.log(token) if (token == null) { navigate('/') } }, [navigate]) useEffect(() => { const api = 'b34999ac538aed71a19355d996f1081f' const options = { method: 'GET' } const rest = (async () => { await axios(`https://api.themoviedb.org/3/discover/movie?api_key=${api}&language=es-ES&page=1p`, options) .then(response => { setMovieList(response.data.results) console.log(movieList) }) }) rest() }, [movieList]) return ( <> <div className='col3' style={{ border: '1px solid red' }}>Peli 1</div> </>) } export default ListadoEl resultado que da es el siguiente en la consola:
(veinte) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {… }, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Línea que no deja de repetirse infinitamente. Espero que haya alguien que pueda arrojar luz sobre este problema que no sé cómo resolver. Saludos y gracias