javascript - 如何在特定时间间隔后显示 react.js 中的每个数组对象？

Question

我有一个包含 3 个元素的数组。我想遍历它，以便在 3 秒后呈现数组的下一个元素以代替前一个元素，如果呈现最后一个元素，则它应该再次重新启动。这就像 3 秒后我想显示下一个元素来代替前一个元素，就像循环遍历数组但一次显示一个元素一样。我已经尝试了以下代码。

import React, { useEffect, useState } from 'react';
import './text.css';
const Text = () => {
    var work = ["fighting", "learning", "qwerty"];
    const [seconds, setSeconds] = useState(0);
    useEffect(() => {
        const interval = setInterval(() => {
            if(seconds===2) setSeconds(seconds => seconds = 0);
            else setSeconds(seconds => seconds + 1);
            console.log(seconds);
        }, 3000);
    }, []);

    return (
        <div>
            <h1>{work[seconds]}</h1>
        </div>
    );
}
 
export default Text;

它成功地一个接一个地渲染元素，但不能在最后一个元素之后渲染任何东西。同样在控制台上，秒的值始终显示为 0。

Answer 1

问题是初始状态值包含在回调范围内，永远不会更新外部范围内的状态值，但在外部定义回调允许状态更新。此外，改为增加索引值并取数组长度的模数以始终获得有效索引。

import React, { useEffect, useState } from "react";

const work = ["fighting", "learning", "qwerty"];

export default function App() {
  const [index, setIndex] = useState(0);

  useEffect(() => {
    const tick = () => setIndex(i => i + 1);

    const id = setInterval(tick, 3000);
    return () => clearInterval(id);
  }, []);

  return (
    <div>
      <h1>{work[index % work.length]}</h1>
    </div>
  );
}