Question

我对在功能组件内部使用setInterval以及上述组件内部的功能行为有疑问。

我有以下代码（经过简化和简化以仅显示问题）：

let timerInterval;

const ModuleAssignedUtils = (props) => {
  const [timer, setTimer] = useState(0);

  updateTimer = () => {
    let timer_tmp;
    if (timer <= 0) {
      clearInterval(timerInterval)
      setTimer(0)
      setButtonPressed(false);
    }
    else {
      timer_tmp = timer - 1;
      setTimer(timer_tmp)
    }
  }

  const locateVehicle = () => {
    if (!buttonPressed) {
      setButtonPressed(true);
      setTimer(10);
      timerInterval = setInterval(() => {
        updateTimer();
      }, 1000);
    }
  }

  return (
    ...

    <ButtonContainer timer={timer}
                     noButtonLoading
                     onEvent={locateVehicle} />
    ...
    )

}

此代码实际上可以完成工作。用户按下按钮将触发功能locateVehicle，该功能依次将计时器设置为10，然后使用updateTimer功能开始间隔。

但是，一旦我将updateTimer定义更改为包含const或function，这部分代码就会停止工作。状态已设置，但是updateTimer总是与timer = 0一起调用，因此它不知道状态已更改。

我很难理解在不使用任何正确声明的情况下声明函数与实际上使用const或function关键字正确声明之间的区别。如果有人可以向我解释这种行为，将不胜感激。

P.S。此后，我已经重构了该组件，并按照Dan Abramov的建议使用了useInterval自定义钩子，所以一切都很好。只是想了解这种特殊情况下行为背后的逻辑。

谢谢！

Answer 1

它停止工作的原因是您的上下文（旧的this）未设置。

写下诸如updateTimer之类的箭头函数表达式时，它会自动绑定您的文本，就像使用bind function一样。

在setInterval方法内部进行函数声明时，也会遇到相同的问题。

setInterval和React功能组件

1 个答案: