setInterval 无限制重新渲染反应完整组件。为什么会发生这种情况以及如何解决？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

setInterval 无限制重新渲染反应完整组件。为什么会发生这种情况以及如何解决？

P粉978742405 2024-04-03 15:39:05

[React讨论组]

504

这是我的反应代码。它使组件无限重新渲染：

const [seconds, setSeconds] = useState(60)
useEffect(() => {
    const interval = setInterval(() => {
        setSeconds(seconds => seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
}, []);

console.log("object");

P粉978742405

全部回复(1)

P粉4760461652024-04-04 14:48:25 1楼

发生这种情况是因为您仅在组件卸载时清除间隔，这仅在用户离开页面时才会发生。

也许这就是您所需要的？当间隔达到 0 时，我将清除它。但是为此我必须使用引用，我不能使用 setInterval 中的状态，因为它只有初始值：

export default function App() {
  const [seconds, setSeconds] = useState(5);
  const secondsRef = useRef(seconds);

  useEffect(() => {
    const interval = setInterval(() => {
      if (secondsRef.current  seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  console.log("running", new Date());

  return  {seconds ;
}