Question

我有一个按钮，可以将名为start的状态从true切换为false。如果为true，则要查看控制台日志，请在我按Stop时立即停止该日志。


  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

Answer 1

即使调用start，局部变量setStart也将永远不会改变。调用setStart只是作出反应以再次渲染组件的指令。在该新渲染上，将创建一个新的局部变量，其开始等于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])

反应useEffect和clearInterval

1 个答案: