Quiero devolver los primeros 2 objetos de una matriz de 4 objetos y luego agregar los otros dos objetos con 5 segundos entre ellos.
nota: estoy invirtiendo la matriz copiada revEvents con reverse() ya que los elementos están en orden descendente por fecha/hora, el elemento más reciente va en la parte superior.
Mi problema actual es que los primeros dos objetos se muestran bien, luego de 5 segundos, carga solo el tercer objeto y se detiene.
useEffect(() => { let ms = 3000 let i = 0 let displayedEvents = [...props].splice(i, 2) setEventsProps(displayedEvents.reverse()) const interval = setInterval(() => { if (++i <= props.length) { displayedEvents = props.splice(0, i + 2) setEventsProps(displayedEvents.reverse()) } }, ms) return () => { clearInterval(interval) } }, []) //JSX as below displayedEvents.map(event () => ...etcMe gustaría compartir una solución mejorada.
useEffect(() => { const ms = 5000 let i = 2 const displayedEvents: IEventsProps = props.slice(0, 2) setEventsProps(displayedEvents.reverse()) let interval: NodeJS.Timeout = setInterval((): void => { if (i < props.length) { displayedEvents.push(props[i]) setEventsProps(displayedEvents.reverse()) i += 1 } else { clearInterval(interval) interval = null } }, ms) return () => { if (interval) { clearInterval(interval) } } }, [])Esto evita crear nuevas matrices innecesarias mediante la mutación de la misma matriz, y también borra el intervalo cuando se realiza el trabajo, por lo que no se ejecuta para siempre.
Se solucionó este problema, en lugar de usar la función splice() , necesitaba usar la función slice() en su lugar.
El código sigue siendo el mismo, mecanografiado agregado para cualquiera que encuentre esto.
useEffect(() => { let ms: number = 5000 let i: number = 0 let displayedEvents: IEventsProps = [...props].slice(i, 2) setEventsProps(displayedEvents.reverse()) const interval: NodeJS.Timeout = setInterval((): void => { if (++i <= props.length) { displayedEvents = props.slice(0, i + 2) setEventsProps(displayedEvents.reverse()) } }, ms) return () => { clearInterval(interval) } }, [])