Reactjs 尽管返回clearinterval，但仍会对内存泄漏作出反应？

我就是找不到这个bug？ 为什么下面的代码给我一个“不能在未安装的组件上执行反应状态更新”

import React，{useState，useffect}来自“React”
函数LogoText（）{
常量[imgCount，setImgCount]=使用状态（0）
常量imgTexts=[
“图像/徽标/徽标_SDe.svg”，
“图像/徽标/徽标_SRe.svg”，
“图像/徽标/徽标_SRn.svg”
]
useffect（（）=>{
const intervalId=setInterval（（）=>{
如果（imgCount！==2）{
setImgCount（prevState=>prevState+1）
}else{setImgCount（0）}
}, 3000)
return（）=>clearInterval（intervalId）；
}，[imgCount]）
返回(
)
}

在useffect中使用

setInterval

有点棘手。我建议您改为使用

setTimeout

更新您的实现。由于您正在react钩子中执行setState，因此它会重新呈现组件，从而导致对useffect的另一个调用

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

---

在useEffect中使用

setInterval

有点棘手。我建议您改为使用

setTimeout

更新您的实现。由于您正在react钩子中执行setState，因此它会重新呈现组件，从而导致对useffect的另一个调用

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

---

您设置了3000毫秒后点火的间隔，但在点火时将其拆下；设置了3000毫秒后点火的新间隔，再次将其拆下，然后重新设置新的间隔，依此类推。看起来有点麻烦。我真的看不出这是如何导致您发布的错误消息的，但为什么不简化代码，看看这是否解决了问题：

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

const images = [
    "images/logo/LOGO_SDe.svg", 
    "images/logo/LOGO_SRe.svg",
    "images/logo/LOGO_SRn.svg",
];

const LogoText = () => {
    const [index, setIndex] = useState(0);
    const updateIndex = () => setIndex(i => (i+1)%3);
    
    useEffect(() => {
        const intervalId = setInterval(updateIndex, 3000);
        return () => clearInterval(intervalId);
    }, []);

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

import React，{useState，useffect}来自“React”；
常量图像=[
“图像/徽标/徽标_SDe.svg”，
“图像/徽标/徽标_SRe.svg”，
“图像/徽标/徽标_SRn.svg”，
];
常量LogoText=（）=>{
const[index，setIndex]=useState（0）；
const updateIndex=（）=>setIndex（i=>（i+1）%3）；
useffect（（）=>{
const intervalId=setInterval（updateIndex，3000）；
return（）=>clearInterval（intervalId）；
}, []);
返回(
);
};

您设置了3000毫秒后点火的间隔，但在点火时将其拆除；设置了3000毫秒后点火的新间隔，再次将其拆除并重新设置一个新间隔，依此类推。看起来有点麻烦。我真的看不出这是如何导致您发布的错误消息的，但为什么不简化代码，看看这是否解决了问题：

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

const images = [
    "images/logo/LOGO_SDe.svg", 
    "images/logo/LOGO_SRe.svg",
    "images/logo/LOGO_SRn.svg",
];

const LogoText = () => {
    const [index, setIndex] = useState(0);
    const updateIndex = () => setIndex(i => (i+1)%3);
    
    useEffect(() => {
        const intervalId = setInterval(updateIndex, 3000);
        return () => clearInterval(intervalId);
    }, []);

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

import React，{useState，useffect}来自“React”；
常量图像=[
“图像/徽标/徽标_SDe.svg”，
“图像/徽标/徽标_SRe.svg”，
“图像/徽标/徽标_SRn.svg”，
];
常量LogoText=（）=>{
const[index，setIndex]=useState（0）；
const updateIndex=（）=>setIndex（i=>（i+1）%3）；
useffect（（）=>{
const intervalId=setInterval（updateIndex，3000）；
return（）=>clearInterval（intervalId）；
}, []);
返回(
);
};

看看这个。看看这个。我明白你的意思-我仍然收到内存泄漏警告，但是/这可能是一个错误吗？可能是在其他地方触发的警告？哪个组件正在使用LogoText？我认为这是一个bug，因为我再也没有收到警告了？我明白你的意思了-我仍然收到内存泄漏警告，尽管/这可能是一个bug吗？也许警告是在其他地方触发的？什么组件正在使用LogoText？我认为这是一个bug，因为我不再收到警告了？