reactjs - 如何在 React 中为 setInterval 创建一个循环？

Question

我正在开发一个呼吸循环应用程序，我想为这两种情况创建一个简单的循环：吸气/呼气。一开始，我有一条消息，它显示“呼吸”状态，然后我在 5 秒后使用 setInterval 将状态更改为“呼吸”。我卡住的地方是，它在这一步之后停止。它应该随着吸气/呼气而继续。

我是 React 的新手，setInterval 是正确的方法吗？

  function App() {

  const [message, setMessage] = useState('breathe in');

  useEffect(() => {
    const interval = setInterval(() => {
      setMessage('breathe out');
    }, 5000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App">
      <div className="circle">
        <span>{message}</span> 
      </div>
    </div>
  );
}

标签： reactjssetinterval

Answer 1

只需更改您的 setMessage 行，您就可以开始了。

setMessage(message === 'breathe in' ? 'breathe out' : 'breathe in');