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

Posted 2023-03-17

【中文标题】Next.js 文本循环组件永远不会更新

【英文标题】：Next.js text cycling component never updates

【发布时间】：2021-11-20 22:19:06

【问题描述】：

我正在尝试编写我认为是一个简单的组件：它需要一个字符串数组，并且每三秒组件的 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;

【参考方案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;