Javascript 设置超时功能与包含清理的useEffect挂钩奇怪地重叠？图像传送带

您好，我正在尝试一个初学者反应项目，我正在构建一个具有旋转木马功能的评论应用程序。 我已经能够使用useffect钩子和setInterval函数在评论之间进行静态切换，但是我也希望用户能够在评论之间手动移动，这就是我被卡住的地方，因为这会导致setInterval函数重叠并导致奇怪的行为。我尝试添加一个清理，它在重新渲染时清除间隔，但不起作用。以下是我目前的代码：

import React, { useState, useEffect } from "react";
import "./style.css";
import { Data } from "../data/index";
import { Review } from "../review/index";

export const App = () => {
  const entries = [...Data]; //reviews data contains imgs,title, etc

  const [currentReview, setCurrentReview] = useState(0); //when updated re-renders the app to new review

  const updateReview = () => { //callback for setinterval
    if (currentReview === entries.length - 1) {
      setCurrentReview(0);
    } else {
      setCurrentReview(currentReview + 1);
    }
  };

  useEffect(() => {
    setTimeout(updateReview, 3000);
    return () => {
      clearTimeout(updateReview, 3000);
    };
  });

  const previous = () => {
    if (currentReview === 0) {
      setCurrentReview(entries.length - 1);
    } else {
      setCurrentReview(currentReview - 1);
    }
  };

  const next = () => {
    if (currentReview === entries.length - 1) {
      setCurrentReview(0);
    } else {
      setCurrentReview(currentReview + 1);
    }
  };

  return (
    <main className="main">
      <button className="btn left" onClick={previous}> //svg for left facing arrow
        <svg
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          height="1em"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polyline points="15 18 9 12 15 6"></polyline>
        </svg>
      </button>


      <Review props={entries[currentReview]} /> //Review component


      <button className="btn right" onClick={next}> //svg for right facing arrow
        <svg
          stroke="currentColor"
          fill="none"
          stroke-width="2"
          viewBox="0 0 24 24"
          stroke-linecap="round"
          stroke-linejoin="round"
          height="1em"
          width="1em"
          xmlns="http://www.w3.org/2000/svg"
        >
          <polyline points="9 18 15 12 9 6"></polyline>
        </svg>
      </button>
    </main>
  );
};

import React，{useState，useffect}来自“React”；
导入“/style.css”；
从“./Data/index”导入{Data}；
从“./Review/index”导入{Review}；
导出常量应用=（）=>{
const entries=[…Data]；//查看包含img、title等的数据
const[currentReview，setCurrentReview]=useState（0）；//更新后，将应用程序重新呈现给新的review
const updateReview=（）=>{//setinterval的回调
if（currentReview==entries.length-1）{
setCurrentReview（0）；
}否则{
setCurrentReview（currentReview+1）；
}
};
useffect（（）=>{
setTimeout（UpdateView，3000）；
return（）=>{
clearTimeout（UpdateView，3000）；
};
});
const previous=（）=>{
如果（currentReview==0）{
setCurrentReview（条目长度-1）；
}否则{
setCurrentReview（currentReview-1）；
}
};
常量下一个=（）=>{
if（currentReview==entries.length-1）{
setCurrentReview（0）；
}否则{
setCurrentReview（currentReview+1）；
}
};
返回(
//用于左向箭头的svg
//审查部分
//右向箭头的svg
);
};

---

如果您需要更多信息，这里是该项目的github repo:

clearTimeout

的参数必须是从上一次

setTimeout

调用返回的超时ID，而不是函数：

  useEffect(() => {
    const timeoutId = setTimeout(updateReview, 3000);
    return () => {
      clearTimeout(timeoutId);
    };
  });

---

clearTimeout

的参数必须是从上一次

setTimeout

调用返回的超时ID，而不是函数：

  useEffect(() => {
    const timeoutId = setTimeout(updateReview, 3000);
    return () => {
      clearTimeout(timeoutId);
    };
  });

---

我说的setInterval是指setInterval和setTimeout。我用了两个词，我说的是setInterval，我指的是setInterval和setTimeout。我已经用过很多次了为我清理这件事。我得等一会儿才能接受你的回答。我还希望在呈现新评论时使用正确效果的幻灯片。你知道如何做到这一点吗？你可能会想要一个CSS转换，但我对它不是很了解，很抱歉我怀疑会是这样。非常感谢你为我澄清这一点。我得等一会儿才能接受你的回答。我还希望在呈现新评论时使用正确效果的幻灯片。你知道如何做到这一点吗？你可能会想要一个CSS转换，但我对它不是很了解，很抱歉我怀疑会是这样