如何以不同的超时延迟显示数组的每个元素，并且每个延迟时间是每个元素内部的值 [英] How to display each element of an array with different timeout delay and each delay time being a value inside each element in react

问题描述

数组的每个元素都应显示一段时间，每个元素的显示时间应由每个元素中的值确定。

Every element of the array should be displayed for some time and the time for which each element is displayed should be determined by a value in each element.

let array=[{display:"a",time:10},{display:"b",time:15},{display:"c",time:22}]
class App extends React.Component{
  state={stateDisplay:"", 
        stateTime:""
        }
         componentWillMount(){
            var i=0;
              let handle=setInterval(()=>{
              var element=  array[i]
              this.setState({
                stateDisplay:element.display,
                stateTime:element.time,
              })
               i=i+1;
               
               if(i===array.length){
                 clearInterval(handle)
               }
               
            },10000)
           
            }
render(){
return(
<div> {this.state.stateDisplay} </div>
)}}

我做了类似的事情，但是使用setinterval延迟只能设置固定时间，此处为10s。
我希望第一个元素显示10s，然后下一个元素显示15s，第三个元素显示22s，这是数组中每个元素的时间值。
我知道我不能使用setinterval做到这一点，有没有办法使用Settimeout做到这一点？

i have done something like this but using setinterval the delay can only be set for a constant time,here 10s. I want the first element to display for 10s and then the next element for 15s, third for 22s which is the time value for each element of the array. I know i cant do that using setinterval is there a way to do this using Settimeout?

推荐答案

像一个小挑战一样，这是我设法在打字稿中提出的内容，如果您需要js，只需删除接口并键入批注

This was almost like a little challenge, heres what i managed to come up with, its in typescript, if you need js, just remove interfaces and type annotations

/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable prettier/prettier */
/* eslint-disable no-shadow */
/* eslint-disable no-console */
import React, { FC, useState, useEffect, useCallback } from 'react';
import { View, Button, Text } from 'react-native';

interface Data {
  duration: number;
  bgColor: string;
}

const dataArr: Data[] = [
  { duration: 3, bgColor: 'tomato' },
  { duration: 6, bgColor: 'skyblue' },
  { duration: 9, bgColor: 'gray' },
];

const Parent = () => {
  const [currentIdx, setCurrentIdx] = useState<number>(0);
  const [elementData, setElementData] = useState<Data>(dataArr[currentIdx]);

  useEffect(() => {
    console.log('idx', currentIdx);
    if (currentIdx > dataArr.length) return;
    setElementData({ ...dataArr[currentIdx] });
  }, [currentIdx]);

  const pushNext = () => {
    setCurrentIdx(currentIdx + 1);
  };

  const handleRestart = () => {
    setCurrentIdx(0);
    setElementData({ ...dataArr[0] });
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Timer
        data={elementData}
        onCountDownComplete={pushNext}
        restart={handleRestart}
      />
    </View>
  );
};

interface Props {
  data: Data;
  onCountDownComplete: () => void;
  restart: () => void;
}

const Timer: FC<Props> = ({ data, onCountDownComplete, restart }) => {
  const [seconds, setSeconds] = useState<number>(data.duration);

  // update on data change
  useEffect(() => {
    setSeconds(data.duration);
  }, [data]);

  const callback = useCallback(() => {
    onCountDownComplete();
  }, [onCountDownComplete]);

  useEffect(() => {
    let interval: any = null;
    if (seconds > -1) {
      interval = setInterval(() => {
        if (seconds - 1 === -1) {
          callback();
        } else {
          setSeconds(seconds - 1);
        }
      }, 1000);
    } else {
      return;
    }
    return () => {
      clearInterval(interval);
    };
  }, [seconds, callback]);

  return (
    <View
      style={{ backgroundColor: data.bgColor, padding: 16, borderRadius: 10 }}
    >
      <Text style={{ marginBottom: 24 }}>{seconds}</Text>
      <Button title="restart" onPress={restart} />
    </View>
  );
};

这篇关于如何以不同的超时延迟显示数组的每个元素，并且每个延迟时间是每个元素内部的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！