Estoy tratando de crear un componente de alerta en React.JS que recibiría una matriz como accesorios y luego recorrería todos los elementos dentro y los mostraría en el componente de alerta.
No sé cómo reiniciar el bucle cuando finaliza el mapa de matriz.
Este es mi código:
useEffect(() => { props.messages.map((item, index) => { setTimeout(() => { setMessage(item); }, 5000*index) }); },[]);Quiero ejecutar el bucle continuamente hasta que el usuario cierre la alerta de notificación.
Mi suposición es envolver el mapa dentro de un tiempo / hacer un tiempo para ejecutarlo hasta que el usuario cierre la barra de notificaciones. Tengo problemas para reiniciar el ciclo una vez que el mapa de la matriz llega al último elemento.
Realmente no necesita calcular un índice y restablecerlo a cero.
Agregue un estado index y un gancho useEffect de montaje para incrementar el índice en el intervalo de 5 segundos. No olvide devolver una función de limpieza para borrar el temporizador de intervalos.
const [index, setIndex] = React.useState(0); useEffect(() => { const timerRef = setInterval(() => { setIndex(i => i + 1); }, 5000); return () => clearInterval(timerRef); },[]); Use un segundo useEffect con una dependencia en el estado del index . Cuando se actualiza, tome el módulo index la longitud de la matriz para calcular un índice dentro del rango válido y actualizar el estado del message actual.
useEffect(() => { const { messages } = props; setMessage(messages[index % messages.length]); }, [index]); Sin embargo, el segundo gancho useEffect y el estado del message no son necesarios y podrían considerarse un estado derivado. Derivado de la matriz props.messages y el estado del index actual. Simplemente puede usarlos directamente en la alerta renderizada.
Ejemplo:
<Alert message={messages[index % messages.length]} />