Estoy intentando 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 cuestion es que cuando tomo los datos, y se hace el setState. comienza un loop infinito que no termina. Comparto código para que se entienda mejor.
introducir el código aquí
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 Listado
El resultado que da es el siguiente en la consola:
(20) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
Línea que no deja de repetirse de forma infinita. Ojala exista alguien que me de luz en este probvlema que no se como resolver. Saludos y gracias.