react循环遍历带有延迟的字符串数组并设置文本值

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

const DelayedText = () => {
  const [textArray, setTextArray] = useState(['Hello', 'World', 'React']);
  const [displayText, setDisplayText] = useState('');

  useEffect(() => {
    const delay = 1000; // 延迟时间，单位为毫秒
    let currentIndex = 0;

    const interval = setInterval(() => {
      if (currentIndex < textArray.length) {
        setDisplayText(textArray[currentIndex]);
        currentIndex++;
      } else {
        clearInterval(interval);
      }
    }, delay);

    return () => clearInterval(interval);
  }, [textArray]);

  return <div>{displayText}</div>;
};

export default DelayedText;