时间戳

首页 > 解决方案 > 反应 useEffect 和 clearInterval

reactjs - 反应 useEffect 和 clearInterval

问题描述

我有一个按钮，可以将名为starttrue 的状态切换为 false。如果是真的，你想查看控制台日志，只要我按下停止，我就希望日志停止。


  useEffect(() => {
    let timePassed = 0;
    let timeLeft = timeLimit;
    if (start) {
      const timerInterval = setInterval(() => {
        timePassed += 1;
        if (!start) {
          console.log('stop')
          clearInterval(timerInterval);
        }
        console.log('start')
      }, 100);
    }
  }, [start]);

控制台永远不会停止记录start

标签： reactjs

解决方案

局部变量start永远不会改变，即使你调用setStart. 调用setStart只是对再次渲染组件做出反应的指令。在该新渲染中，将创建一个新的局部变量，其 start 等于 false，但前一次渲染的效果永远不会看到。

相反，您需要的是返回一个拆解函数。当第二次调用效果时，react 会调用上一次的拆解函数。

useEffect(() => {
  let timePassed = 0;
  let timeLeft = timeLimit;
  if (start) {
    const timerInterval = setInterval(() => {
      timePassed += 1;
      console.log('start')
    }, 100);

    return () => {
      console.log('stop')
      clearInterval(timerInterval);
    }
  }
}, [start])

推荐阅读