违反“setInterval”处理程序花费了 <N> 毫秒答案

【问题标题】：Violation 'setInterval' handler took <N>ms违反“setInterval”处理程序花费了 <N> 毫秒
【发布时间】：2022-06-17 11:24:59
【问题描述】：

我在浏览器控制台中收到[Violation] 'setInterval' handler took <N>ms 消息。这说明什么？

如何使以下代码更好地避免出现此警告消息。

反应代码是 -

function PopularBrands() {
  const [slideIndex, setSlideIndex] = useState(1);

  useEffect(() => {
    console.log("useEffect");

    const paginate = () => {
      setSlideIndex((index) => {
        console.log(index);
        if (index === 4) {
          return 1;
        } else {
          return index + 1;
        }
      });
    };
    const interval = setInterval(paginate, 3000);
    return () => clearInterval(interval);
  }, []);

  return ...

 }

【问题讨论】：

相关：stackoverflow.com/questions/42218699/… - 也就是说，它无论如何都不是致命的。
顺便说一句，您可以使用setSlideIndex((index) => (index - 1) % 4 + 1) 简化您的代码。

标签： reactjs setinterval use-effect

【解决方案1】：

避免使用需要在语句本身内处理的代码调用 setInterval，始终传入完整的值。

【讨论】：