如何在React中为setInterval创建循环

Question

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

我是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>
);
}

Answer 1

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

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