ReactJS 在功能组件中每 X 秒更改一次背景颜色

Posted 2023-02-22

【中文标题】ReactJS 在功能组件中每 X 秒更改一次背景颜色

【英文标题】：ReactJS change background color every X second in functional component

【发布时间】：2021-06-17 18:21:50

【问题描述】：

您好，我制作了一个功能组件，其中有一个间隔。它每 8 秒更改一次背景图像，总共有 5 张照片，它在前 5 轮工作正常，但之后开始出现故障

这里是沙盒（间隔为 3 秒）：https://codesandbox.io/s/infallible-darkness-8s2u4?file=/src/slider.js

【参考方案1】：

您应该在 useEffect 挂钩中运行这部分代码。请记得清理区间：

useEffect(() => 
  const interval = setInterval(() => 
    if (state.img === 4) 
      setState((prev) => (
        ...prev,
        img: 0
      ));
     else 
      setState((prev) => (
        ...prev,
        img: state.img + 1
      ));
    
  , 3000)
  return () => clearInterval(interval);
, [state.img]);