Estoy tratando de hacer nuevas solicitudes cada vez que el usuario llega al fondo con lo siguiente;
useEffect(() => { const scrolling_function = () => { if((window.innerHeight + window.scrollY) >= document.body.offsetHeight-10){ window.removeEventListener('scroll',scrolling_function) getMoviesFromApi() } } window.addEventListener('scroll', scrolling_function); }, [])Pero los objetos de estado que definí, como:
const[selectedGenres, setSelectedGenres] = useState(new Set()) Todo se vuelve indefinido en el interior de mi useEffect y, por lo tanto, mi getMoviesFromApi() no funciona correctamente.
Mi pregunta es, ¿es ese el comportamiento esperado? Si es así, ¿cómo podría superarlo?
El método getmoviesfromapi :
const getMoviesFromApi = async () => { setLoading(true) let init, end; if(initialYear>endYear) { init = endYear end = initialYear } else { init = initialYear end = endYear } let res =await fetchMovies(init, end) setLoading(false) setMovies(res.results) } El método fetchMovies :
const fetchMovies = async (startYear, endYear) => { let res; res = []; let genreQuery = ""; let serviceQuery = ""; for (let it = selectedGenres.values(), val= null; val=it.next().value; ) { genreQuery += "&genre=" + val; } for (let it = selectedServices.values(), val= null; val=it.next().value; ) { serviceQuery += "&service=" + val; } let countryQuery = "?country="+country; let yearQuery = "&year_min="+ startYear +"&year_max=" + endYear; let typeQuery = "&type=" + (isMovie ? "movie" : "series"); let url = api_url + countryQuery + serviceQuery + typeQuery +"&order_by=year" + yearQuery + genreQuery + "&page=1&desc=true&language=en&output_language=en" await fetch(url, { "method": "GET", }).then(response => { res= response.json() }) .catch(err => { console.error(err); }); return res; };Debe agregar los objetos y funciones de estado necesarios a las dependencias y llamar a las funciones con useCallBack. Puede estar seguro de que lo está haciendo bien al instalar eslint-plugin-react-hooks como una dependencia de desarrollo. También necesitaría una función de limpieza para su gancho de efectos.
useEffect( () =>{ const scrolling_function = async () => { if((window.innerHeight + window.scrollY) >= document.body.offsetHeight-10){ await getMoviesFromApi(false); } } window.addEventListener('scroll', scrolling_function); return function cleanUp() { //don't forget to clean up window.removeEventListener('scroll',scrolling_function); } }, [getMoviesFromApi]); //add method as dependency! //... const getMoviesFromApi = useCallback () => { //useCallBack is needed here! ... }