Next.js 文本循环组件永远不会更新

Question

我正在尝试编写我认为是一个简单的组件：它需要一个字符串数组，并且每三秒组件的 div 中的文本更改为数组中的下一项，循环返回开始。

虽然控制台显示更改消息功能每三秒运行一次，但消息从未更改。我认为这是因为 useState 更新永远不会发生。为什么会这样，我该如何让它发挥作用？

// components/textCycle.js
import { useState, useEffect} from 'react';

function TextCycle ( { array } ) {
  const [ msg, setMsg ] = useState(0);

  useEffect(() => { 
    function changeMsg() {
      setMsg((msg > array.length) ? 0 : msg + 1);
    }
    setInterval( changeMsg, 3000);
  }, []);

  return (
    <div>
     { array[msg] }
    </div>
  );
};

export default TextCycle;

Answer 1

// components/textCycle.js
import { useState, useEffect} from 'react';

function TextCycle ( { array } ) {
  const [msg, setMsg] = useState(0);
function changeMsg() {
    setMsg((msg > array.length - 2) ? 0 : msg + 1);
}

useEffect(() => {
    setTimeout(changeMsg, 1000);
}, [msg]);

return (
    <div>
        {array[msg]}
    </div>
);
};

export default TextCycle;