Estoy tratando de ejecutar varias cuentas regresivas desde una matriz, por ejemplo, [11, 12, 13, 14, 15, 16]. Lo que me gustaría lograr es que la primera vez configure el tiempo de cuenta regresiva en 11, cuando llegue a 0, el temporizador se configure en 12 y luego cuente regresivamente a 0. Después de eso, reinicie a 13 y haga la cuenta regresiva, luego reinicie a 14 y cuenta regresiva, etc.
Sin embargo, mi código solo puede contar de 11 a 0 y luego detenerse. For loop parece no funcionar y nunca coloque el segundo elemento 12 en el temporizador. Más tarde descubrí que se debe a que el retorno dentro del bucle lo rompe fuera del bucle. Me pregunto si hay algunas formas inteligentes de evitar el retorno en un For-Loop. O, ¿cómo usar Return in For-Loop sin salirse del bucle?
(Tengo otro contador allí llamado TotalTime que tenía la intención de contar todo el tiempo total que tarda, es decir, 11+12+13+14, etc.)
El temporizador y la pantalla de visualización:
import {View, Text, StyleSheet, FlatList} from 'react-native'; import PlaySounds from './PlaySounds'; const CustomTimer = ({time, length}) => { const [seconds, setSeconds] = useState(time); const [totalTime, setTotalTime] = useState(0); useEffect(() => { if (seconds > 0 ) { const interval = setInterval(() => { setSeconds(seconds => seconds - 1); setTotalTime(seconds=>seconds + 1) }, 1000); return () => clearInterval(interval); }}, [seconds]) return ( <View> <Text style={{fontSize:20}}> Count Down: {seconds} sec</Text> <Text style={{fontSize:20}}> Total Time: {totalTime} sec</Text> </View> )} export default CustomTimer; ===================== import React, {useEffect, useState} from 'react'; import {SafeAreaView,View,Button,ScrollView, Text, StyleSheet} from 'react-native'; import CustomTimer from '../component/CustomTimer'; const BrewScreen = () => { const timeArray= [11, 12, 13, 14, 15, 16] const length = timeArray.length const countDownArray=() =>{ for (let i=0; i<length; i++) { return(<CustomTimer time={timeArray[i]} length={length}/>) } } return ( <> <ScrollView> {countDownArray()} </ScrollView> </> ) }El problema parece ser que regresas dentro del bucle for.
Esto significa que durante la primera iteración del bucle for en la función countDownArray, devuelve el elemento Timer. Cuando haga esto, la función saldrá y el ciclo no continuará.
Lo que necesitaría en cambio para lograr el comportamiento deseado es una forma diferente de crear los elementos del temporizador. Es probable que esto requiera una función de devolución de llamada en el elemento Timer. Esto se puede usar para actualizar el estado de BrewScreen y actualizar el temporizador que se muestra.
Finalmente lo resuelvo, no usando bucles sino el poderoso useEffect:
const CustomTimer = ({time}) => { const [seconds, setSeconds] = useState(time[0]); const [count, setCount] = useState(1) const [totalTime, setTotalTime] = useState(0); useEffect(() => { if (seconds >= 0 ) { const interval = setInterval(() => { setSeconds(seconds => seconds - 1); setTotalTime(seconds=> seconds + 1) console.log('seconds ', seconds, ' totalTime ', totalTime) }, 1000); return () => clearInterval(interval);} else if (count<(time.length)) { setCount(count => count+1) setSeconds(time[count])} else return } ) return ( <View> <Text style={{fontSize:20}}> Count Down: {seconds} sec</Text> <Text style={{fontSize:20}}> Total Time: {totalTime} sec</Text> {seconds===3?<PlaySounds/>:null} </View> )}