Así que tengo una aplicación con amigos y eventos, donde cada amigo tiene eventos específicos.
Solo quiero recuperar cada evento de cada amigo.
Tengo un estado de 'evento' const [events, setEvents] = useState([]);
Entonces aquí está el fragmento problemático useEffect :
useEffect(() => { getFriendsIds() .then(idsArray => { Promise.all(idsArray.map(id => { getUserEvents(id) .then(evs => { if (evs.length > 0) { for (let i=0; i<evs.length; i++) { setEvents([...events, evs[i]]); } } }) })) }) }, []) Esto debería almacenar los eventos antes mencionados en la variable de estado 'eventos'.
Sin embargo, cuando trato de representarlos con {events.map(ev => renderItem(ev))} , solo obtengo el último evento del último amigo en el ciclo (se garantiza que renderItem funciona bien).
Me encantaría una explicación de cómo funciona esto y, si es posible, un algoritmo alternativo que realmente logre lo que pretendo hacer.
Gracias
En realidad, esto sucede porque su useEffect() no tiene el estado de events en su matriz de dependencia.
useEffect(() => { ... }, [events]) Sin embargo, esta solución no funcionará correctamente porque la función setState() funciona de forma asíncrona.
Tienes que usar la función de actualización de estado en este caso:
useEffect(() => { ... setEvents((prevEvents) => [...prevEvents, evs[i]]); ... }, []); Obtenga más información sobre dependency array y state updater en la documentación oficial.
Intente pasar una función a setEvents y elimine el bucle for.
if (evs.length > 0) { setEvents((prev) => ([...prev, ...evs])); }Mueva el setState fuera del ciclo -
useEffect(async () => { const ids = await getFriendsIds() const events = await Promise.all(ids.map(getUserEvents))) setEvents(events.flat()) // replace }, []) Si desea agregar events al estado de eventos existente, puede usar una actualización funcional:
useEffect(async () => { const ids = await getFriendsIds() const events = await Promise.all(ids.map(getUserEvents))) setEvents(r => [...r, ...events.flat()]) // append }, []) Puede usar .flat en lugar de verificar .length , ya que eliminará las matrices vacías automáticamente:
const a = [["event1", "event2"], [], ["event3"], ["event4"], []] console.log(a.flat()) // ["event1", "event2", "event3", "event4" ]