Cómo ejecutar una serie de relojes de cuenta regresiva.

Estoy tratando de ejecutar múltiples cuentas regresivas desde un arreglo, por ejemplo, [11, 12, 13, 14, 15, 16]. Lo que me gustaría lograr es que la primera vez se establezca el tiempo de cuenta regresiva en 11, cuando llegue a 0, el temporizador se establece en 12 y luego cuenta regresiva hasta 0. Después de eso, se reinicia a 13 y cuenta regresiva, luego se reinicia a 14 y cuenta regresiva, etc.

Sin embargo, mi código solo puede hacer la cuenta regresiva de 11 a 0 y luego detenerse. El bucle for parece no estar funcionando y nunca coloca el segundo elemento 12 en el temporizador. Más tarde descubrí que esto se debe a que el return dentro del bucle for lo rompe fuera del bucle. Me pregunto si hay alguna forma inteligente de evitar el return en un bucle for. O, ¿cómo usar return en un bucle for sin salir del bucle?

(Tengo otro contador llamado TotalTime que pretendía contar todo el tiempo total que lleva, es decir, 11+12+13+14, etc.)

El temporizador y la pantalla de visualización:

import React, { useEffect, useState } from ‘react’;
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 (

Count Down: {seconds} sec
Total Time: {totalTime} sec

);
};

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 ;
}
};

return (
<>

{countDownArray()}

);
};

davy.ai

July 31, 2023 at 12:06 pm

Para lograr la secuencia de cuenta regresiva deseada desde la matriz, puedes hacer uso del hook useState para realizar un seguimiento del índice actual del timeArray. Luego, en el hook useEffect del componente CustomTimer, puedes verificar si la cuenta regresiva se ha completado para el elemento actual en la matriz, y si es así, actualizar el índice para pasar al siguiente elemento y reiniciar el temporizador al nuevo tiempo.

import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';

const CustomTimer = ({ time }) => {
  const [seconds, setSeconds] = useState(time);
  const [currentIndex, setCurrentIndex] = useState(0);
  const [totalTime, setTotalTime] = useState(0);

  useEffect(() => {
    if (seconds > 0) {
      const interval = setInterval(() => {
        setSeconds((seconds) => seconds - 1);
        setTotalTime((totalTime) => totalTime + 1);
      }, 1000);
      return () => clearInterval(interval);
    } else {
      if (currentIndex < timeArray.length - 1) { // verificar si hay más elementos en la matriz
        setCurrentIndex((currentIndex) => currentIndex + 1); // actualizar el índice para moverse al siguiente elemento
        setSeconds(timeArray[currentIndex + 1]); // reiniciar el temporizador al nuevo tiempo
      }
    }
  }, [seconds]);

  return (
    <view>
      <text style="{{" fontsize:="" 20="" }}=""> Cuenta Regresiva: {seconds} seg </text>
      <text style="{{" fontsize:="" 20="" }}=""> Tiempo Total: {totalTime} seg </text>
    </view>
  );
};

export default CustomTimer;

En tu componente BrewScreen, en lugar de devolver el componente CustomTimer para cada elemento en timeArray usando un bucle for, puedes hacer uso de la función map para devolver una matriz de componentes CustomTimer que mostrarán la cuenta regresiva en secuencia.

import React from 'react';
import { ScrollView } from 'react-native';
import CustomTimer from '../component/CustomTimer';

const BrewScreen = () => {
  const timeArray = [11, 12, 13, 14, 15, 16];

  return (
    <>
      <scrollview>
        {timeArray.map((time) => (
          <customtimer time="{time}" key="{time}"></customtimer>
        ))}
      </scrollview>

  );
};

export default BrewScreen;

Con esta implementación, deberías poder lograr la secuencia deseada de cuentas regresivas desde la matriz, sin usar una declaración de retorno dentro de un bucle for.

es.davy.ai

¿Tienes una pregunta?

Cómo ejecutar una serie de relojes de cuenta regresiva.

Answer

davy.ai