Reactjs 反应效果和清除间隔

我有一个按钮，可以将名为

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

本地变量

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])

---

我试过了，同样的情况