时间戳

首页 > 解决方案 > 反应内存泄漏虽然我返回一个clearinterval？

reactjs - 反应内存泄漏虽然我返回一个clearinterval？

问题描述

我似乎无法在这里找到错误？为什么下面的代码给我一个“无法对未安装的组件执行反应状态更新”？

import React, {useState, useEffect} from 'react'

function LogoText(){
    const[imgCount, setImgCount] = useState(0)
    const imgTexts = [
        "images/logo/LOGO_SDe.svg", 
        "images/logo/LOGO_SRe.svg",
        "images/logo/LOGO_SRn.svg"
    ]

    useEffect(() => {
        const intervalId = setInterval(() => {
            if(imgCount !== 2){
                setImgCount(prevState => prevState + 1)
            } else {setImgCount(0)}
        }, 3000)
        return () => clearInterval(intervalId);
    }, [imgCount])

    return(
        <div className="imgText-container">
            <img src={imgTexts[0]} alt='' className={imgCount === 0 ? "showImg" : null}/>
            <img src={imgTexts[1]} alt='' className={imgCount === 1 ? "showImg" : null}/>
            <img src={imgTexts[2]} alt='' className={imgCount === 2 ? "showImg" : null}/>
        </div>
    )
}

标签： reactjs

解决方案

在 useEffect 中使用setInterval有点棘手。我建议您改为更新您的实现setTimeout。由于您在反应钩子中执行 setState，因此它会重新渲染您的组件，从而导致再次调用 useEffect。

useEffect(() => {
  const intervalId = setTimeout(() => {
    if(imgCount !== 2){
      setImgCount(prevState => prevState + 1)
    } else {setImgCount(0)}
  }, 3000)
  return () => clearTimeout(intervalId);
}, [imgCount])

推荐阅读