0

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.

0

1 respuesta 1

1

ese warning no es nada como te dijo Jaime tienes que eliminar la variable del array de dependencias, eso crea un bucle infinito ya que si la seteas dentro no parará de ejecutarse. Tienes dos soluciones.

  1. Poner un condicional en el useeffect

     if(!movielist){
         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()
     }
    
  2. o bien si no quieres que te salga ese warning, despues del useEffect poner //eslint-disable-line

     useEffect(()=>{
          //lineas de código
     },[variable]) //slint-disable-line
    
3
  • Como ya habia comentado antes, si borro el contenido del array de dependecia, obtengo como resultado un array vacio, es decir, el setMovieList(response.data.results) no genera ningun resultado y movieList no se carga con los datos. Si quito directamente el array de dependencia, pasa lo mismo a como si tubiera el array con el estado [movieList] Es un tema, no se porque sucede esto el 3 jul. 2022 a las 21:58
  • porque setmoviellist es asincrono, cuando se ejecuta el console log movielist aun no tiene nada. una cosa es que no te aparezca nada por consola y otra que no funcione el código. si quieres saber si movielist tiene algo añade un useEffect(()=> {console.log(movieList)},[movieList]) para que cada vez que cambie la variable te la escriba por consola
    – Suso
    el 3 jul. 2022 a las 22:02
  • Perfecto por ese dato y agradecidisimo, saludos el 3 jul. 2022 a las 22:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.