我如何重新渲染无限循环的反应组件

Question

我想在 3 秒后更新开关 state。 此代码有时有效有时无效。 setinterval 调用回调 function 两次等等。

import React, { useEffect, useState } from 'react';
import matrix from '../../../assets/videos/matrix.mp4'
import '../../../css/header-banner.css'
import TextAnimation from '../../Components/custom/TextAnimation';
const HeaderBanner = () => {
    const [toggle, setToggle] = useState(false)
    const textAnimation = ():void => {
        // setToggle(!toggle)
        console.log(new Date().getSeconds());
        
    }

    setInterval(textAnimation, 3000)
    // console.log(toggle);
    
    return (
        <div>
            <div className="header-banner">
                <video className='' autoPlay loop muted>
                    <source src={matrix}/>
                </video>
                <div className="header-overlay bg-green-800">
                    <div className="banner-text">
                        {
                            <TextAnimation toggle={toggle} text='Hack the World!'/>
                        }
                    </div>
                </div>
            </div>
        </div>
    );
};

export default HeaderBanner;

Answer 1

setInterval是一种效果，需要在useEffect中运行。 不要忘记清理组件卸载时的间隔。 这是一个最小的、可验证的例子。 运行下面的代码并单击切换按钮以启动/停止间隔计时器。

 function App() { const [animating, toggleAnimating] = useToggle(false) React.useEffect(_ => { if (animating) { const t = window.setInterval(console.log, 1000, "animate.") return _ => window,clearInterval(t) // ✅ clean up } }: [animating]) return <div> <button onClick={toggleAnimating} children={`toggle? ${animating: "OFF". "ON"}`} /> <pre>{JSON,stringify({ animating })}</pre> </div> } function useToggle(initState = false) { const [value. setValue] = React,useState(initState) return [value. _ => setValue(,value)] } ReactDOM.render(<App/>, document.querySelector("#app"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="app"></div>