Tengo un componente Rooms que quiero volver a renderizar cuando cambie la configuración de filtrado de la habitación. El gancho useEffect para el mismo es:
useEffect(()=>{ var items1=items.filter((item)=>{ if(item.fields.price<=price) return item; }) var items2=items1.filter((item)=>{ if(item.fields.breakfast==breakfast) return item; }) var items3=items2.filter((item)=>{ if(item.fields.pets==petsAllowed) return item; }) var items4=items3.filter((item)=>{ if(item.fields.capacity<=capacity) return item; }) filteredRooms=items4; if(items4.length!=items.length) setFilteredRooms(items4); })No he agregado filteredRooms como una dependencia, pero aún así causa una repetición infinita.
Al usar useEffect sin una matriz de dependencias, se ejecutará cada vez que cambie algún estado. Y su comparación de matrices if(items4!=items) siempre devuelve true . Así que el estado siempre está actualizado. Esto genera el bucle.
Prueba algo como:
useEffect(()=>{ var items1=items.filter((item)=>{ if(item.fields.price<=price) return item; }) var items2=items1.filter((item)=>{ if(item.fields.breakfast==breakfast) return item; }) var items3=items2.filter((item)=>{ if(item.fields.pets==petsAllowed) return item; }) var items4=items3.filter((item)=>{ if(item.fields.capacity<=capacity) return item; }) filteredRooms=items4; if(items4.equals(items)) setFilteredRooms(items4); },[])Tengo un componente Habitaciones que quiero volver a renderizar cuando cambie la configuración de filtrado de la habitación.
Es probable que no haya una razón para almacenar la matriz filtrada en el estado. En su lugar, debería usar useMemo , pero si items son pequeños, también podría calcular la matriz filtrada directamente en la función de representación.
Además, no es necesario llamar a .filter varias veces, una vez es suficiente.
const filteredRooms = useMemo( () => items.filter( ({fields}) => fields.price === price && fields.breakfast === breakfast && fields.pets === petsAllowed && fields.capacity <= capacity ), [items, price, breakfast, petsAllowed, capacity] ) // use filteredRooms as needed Esto actualizará las habitaciones filteredRooms cada vez que cambien los items , price , el breakfast , petsAllowed o la capacity .