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，所以这些

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

import React from "react";

function App() {

  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],
  };
  const scoreValue = (time, score) => {
    time.forEach((timePoint, i) => {
      setInterval(() => {
        <p>{score[i]}</p>
      }, timePoint * 1000);
    });
  }
  return (
    <div className="App">
      {scoreValue(Reps.TimeOfMove, Reps.ScoreOfMove)}
    </div>
  );
}

export default App;

从“React”导入React；
函数App（）{
常数代表={
移动时间：[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]，
};
const scoreValue=（时间、分数）=>{
time.forEach（（时间点，i）=>{
设置间隔（（）=>{
{score[i]}

}，时间点*1000）；
});
}
返回(
{scoreValue（Reps.TimeOfMove，Reps.ScoreOfMove）}
);
}
导出默认应用程序；

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

尝试创建一个状态（currentScore）并在interval上为其设置值，这是由forEach循环和setInterval完成的

import React, { useState } from "react";

function App() {
  const [currentScore, setCurrentStore] = useState(null);
  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],
  };

  useEffect(() => {
      Reps.TimeOfMove.forEach((time, index) => {
          setTimeout(() => {
              setCurrentStore(Reps.ScoreOfMove[index])
          }, time * 1000)
      })
  },[])

  return (
    <div className="App">
        <p>{currentScore}</p>
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
函数App（）{
常量[currentScore，setCurrentStore]=useState（null）；
常数代表={
移动时间：[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]，
};
useffect（（）=>{
每次移动的重复时间（（时间，索引）=>{
设置超时（（）=>{
setCurrentStore（移动[索引]的代表分数）
}，时间*1000）
})
},[])
返回(
{currentScore}

);
}
导出默认应用程序；

这应该行得通

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

function App() {
    const [score, setScore] = useState('');

    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],
    };
    useEffect(() => {
        Reps.TimeOfMove.forEach((time, index) => {
            const interval = setInterval(() => setScore(Reps.ScoreOfMove[index]), time * 1000);
            return () => {
                clearInterval(interval);
            };
        })

    }, [])

    return (
        <div>
            {score}
        </div>
    );
}

export default App;

import React，{useffect，useState}来自“React”；
导入“/App.css”；
函数App（）{
const[score，setScore]=使用状态（“”）；
常数代表={
移动时间：[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]，
};
useffect（（）=>{
每次移动的重复时间（（时间，索引）=>{
const interval=setInterval（（）=>setScore（移动[索引]的重复分数），时间*1000）；
return（）=>{
间隔时间；
};
})
}, [])
返回(
{score}
);
}
导出默认应用程序；

这里有一个香草JS解决方案，您可以在React中应用，也可以在您想要的地方应用

这是一个递归解决方案

const arrs = {
  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],  
}

const runTimer = (index) => {
  if (index === arrs.TimeOfMove.length - 1) {
    console.log('Timer is finished!')
    return;
  }
 
  setTimeout(() => {
    console.log(arrs.ScoreOfMove[index]);
    runTimer(index + 1);
  }, arrs.TimeOfMove[index] * 1000)
}

const INDEX_START = 0;

runTimer(INDEX_START);

传统的，共享的

---

如果您想在DOM中显示文本“移动分数”，可以使用ReactJS的useState并在计时器运行时设置分数。

最好触发

Reps.TimeOfMove.forEach（（时间，索引）=>{setTimeout（（）=>{setCurrentStore（Reps.ScoreOfMove[index]），time*1000}

在

useEffect中以这种方式重新渲染，当状态更新时，我相信不会导致forEach再次执行。类似这样的事情我认为是的，我们需要将它包装在useffect中。