Todavía soy principiante usando ReactJS y no entiendo un problema que tengo.
Mi useEffect está obteniendo una lista de datos y luego hago un filter .
Pero cuando guardo el valor de los datos de este filtro, y con un console.log() trato de ver el valor de retorno de mi filtro, hay un ciclo infinito de datos guardados que se están cargando y no entiendo por qué sucede esto. .
Puede alguien ayudarme con esto?
Aquí está mi código y es más fácil entender lo que quiero decir:
Y puse mi código en codesandbox
import React, { useRef } from "react"; import { Map, TileLayer } from "react-leaflet"; import { getAccommodations } from "./data"; import "./styles.css"; const App = () => { const center = [-27.592495455704718, -48.484572875610034]; const mapRef = useRef(); const [thing, setThing] = React.useState(0); const [accommodationData, setAccommodationData] = React.useState([]); React.useEffect(() => { if (mapRef.current) { const response = getAccommodations(); const _response = response.filter((accommodation) => { return mapRef.current.leafletElement .getBounds() .contains([accommodation.listing.lat, accommodation.listing.lng]); }); setAccommodationData(_response); } }, [center, thing, accommodationData]); // I commented this line to avoid too many re-renders // console.log("accommodationData: ", accommodationData); return ( <Map ref={mapRef} style={{ width: "100%", height: "100vh" }} center={center} zoom={13} onmoveend={() => { setThing(thing + 1); }} > <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' /> {/* I'll add some <Markers> here with the accommodationData array */} </Map> ); }; export default App;Muchas gracias por adelantado
El gancho useEffect mantiene el gatillo porque está cambiando el estado de datos de alojamiento, que es una de las dependencias de useEffect . Entonces, solo tiene que eliminarlo de las dependencias o agregar otra respuesta de estado y luego cambiar los datos de alojamiento cuando tenga una respuesta , por ejemplo:
const center = [-27.592495455704718, -48.484572875610034]; const mapRef = useRef(); const [thing, setThing] = React.useState(0); const [accommodationData, setAccommodationData] = React.useState([]); const [response, setResponse] = React.useState(null); React.useEffect(() => { if (mapRef.current && !response) { const response = getAccommodations(); const _response = response.filter((accommodation) => { return mapRef.current.leafletElement .getBounds() .contains([accommodation.listing.lat, accommodation.listing.lng]); }); setResponse(_response); } }, [center, thing, accommodationData]); React.useEffect(() => { if (response) setAccommodationData(_response); }, [response]);