如何在ReactJS中每隔5秒显示一条消息

Question

我有一个消息数组，我想在我的React页面的Header组件中显示该数组中的每个消息。

const array = ['a', 'b', 'c', 'd'];

我想在一个

标签中显示每条消息，同时我需要一个清除超时函数，以防止每次点击后时间加快，并且它应该在5秒后切换到下一条消息，请有人能帮帮我吗。

Answer 1

对于对数组的简单循环，你可以这样做：

const array = ['a', 'b', 'c', 'd'];

counter = 0;
const interval = setInterval(() => {
  console.log(array[counter % array.length]); //例如 "a", "b"
  //你可以对返回值做任何操作（将其放入a标签中）
  counter++;
}, 5000);

要清除间隔，你可以这样做：

clearInterval(interval);

我不确定你想要在点击事件中做什么。请提供进一步的信息。