时间戳

首页 > 解决方案 > setInterval 和 React 功能组件

reactjs - setInterval 和 React 功能组件

问题描述

我有一个关于使用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定义更改为包含constor function，这段代码就会停止工作。状态已设置，但updateTimer始终使用 调用timer = 0，因此它不知道状态已更改。

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

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

提前致谢！

标签： reactjs

解决方案

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

当您写下箭头函数表达式时，例如 your updateTimer，它会自动绑定您的上下文，就像使用bind function一样。

如果在 setInterval 方法中声明函数，您将遇到同样的问题。

推荐阅读