Javascript 想在几秒钟内显示不同的文本和数组吗

我有这样一个问题：

我有一个数据数组，我有一个时间数组。以下是阵列：

  const Reps = {
    TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
    ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
  };

一秒钟后我想显示数字60，2.5秒后显示数字85，所以这些

我还想在一秒钟后将ScoreOfMove数组显示为：

[60,0…0]

，在2.5秒后将数组显示为：

[60,85,0…0]

这是我到目前为止一直在尝试的代码，但它对我不起作用

import React, { useEffect, useState } from 'react';
import "./styles.css";

const Reps = {
  TimeOfMove: [1, 2.5, 3, 3.5, 4.5, 5, 6, 10, 12, 13, 14, 15.5],
  ScoreOfMove: [60, 85, 42, 60, 70, 80, 90, 100, 90, 40, 0, 20],
};
let i = 0;

export default function App() {
  const [time, setTime] = useState('');
  const [timeArr, setTimeArr] = useState([]);

  useEffect(() => {
      setTimeout(() => {
        setTime(Reps.ScoreOfMove[i])
        i++;
      }, Reps.TimeOfMove[i] * 1000)
  }, [time])
  
  return (
    <div className="App">
      {time}
      {timeArr}
    </div>
  );
}

从“React”导入React，{useffect，useState}；
导入“/styles.css”；
常数代表={
移动时间：[1,2.5,3,3.5,4.5,5,6,10,12,13,14,15.5]，
运动分数：[60,85,42,60,70,80,90,100,90,40,0,20]，
};
设i=0；
导出默认函数App（）{
常量[时间，设置时间]=使用状态（“”）；
const[timeArr，setTimeArr]=useState（[]）；
useffect（（）=>{
设置超时（（）=>{
设置时间（移动的重复次数分数[i]）
i++；
}，重复移动时间[i]*1000）
}[时间]）
返回(
{time}
{timeArr}
);
}

---

我希望根据显示的时间，每次显示不同的文本，每次显示不同的数组。

setTimeout

仅在指定的超时间隔后执行一次。因此，您的代码只运行一次。例如，最好将逻辑移到另一个（递归）函数，这样您就可以为

Reps.TimeOfMove

数组中的每个项目调用

setTimeout

：

const setNextTime=i=>{
如果（i>=移动长度的重复时间）{
return；//我们已经到了终点，所以什么都不要做
}
设置超时（（）=>{
设定时间（运动的重复分数[i]）；
setNextTime（i++）；
}，代表移动时间[i]*1000）；
}
useffect（（）=>{
setNextTime（0）；
}, []);

马特是对的，所以试试这个：

const Reps={
移动时间：[1,2.5,3,3.5,4.5,5,6,10,12,13,14,15.5]，
运动分数：[60,85,42,60,70,80,90,100,90,40,0,20]，
};
函数App（）{
const[time，setTime]=React.useState（）；
//创建一个新的数组引用，其长度与ScoreOfMove的长度相同，并用零填充
const timeArr=React.useRef（新数组（Reps.ScoreOfMove.length）.fill（0））；
React.useffect（（）=>{
让定时器；
设i=0；
常数滴答=（）=>{
//保留当前索引的引用
//在setTimeout内使用，以及
//将实际索引引用增加1，以进行下一次勾号验证
常数currentIndex=i++；
计时器=设置超时（（）=>{
//使用相应的值更新数组索引
//在设置时间之前运行此命令以保持同步
timeArr.current[currentIndex]=移动的重复记分[currentIndex]；
设置时间（移动[当前索引]的重复次数）；
if（Reps.TimeOfMove[i]）{//如果有下一个勾号
勾选（）；
}
}，代表移动时间[currentIndex]*1000）；
}
勾选（）；
return（）=>clearTimeout（timer）；//清除超时以防止内存泄漏
//无依赖项，只执行一次效果
}, [])
返回(
{time}

{timeArr.current.toString（）}

);
}
render（，document.getElementById（“根”））