useEffect具有缺少的依赖项，即const函数

Question

useEffect(() => {
    let interval = null;
    if (isOn) {
      interval = setInterval(() => {
        counting();
      }, 1000);
    } else {
      clearInterval(interval);
    }
    return () => clearInterval(interval);
}, [isOn, currentTimeMs]);


const counting = () => {
    setCurrentTimeMs(currentTimeMs + 1);
};

我认为useEffect的依赖关系仅接受变量，但是它还要求我放置一个const函数？这是为什么？这是webpack出错还是什么？

React Hook useEffect缺少依赖项：“计数”。包括 或删除依赖项数组react-hooks / exhaustive-deps

我还收到另一个警告：

'counting'函数使useEffect Hook依赖（在第 39）更改每个渲染。将其移至useEffect回调中。 或者，将“步幅”定义包装到其自己的useCallback（）中 钩反应钩/详尽的下降

我以为我已经在useEffect回调内部进行了调用。有人可以解释吗？该文档没有对useEffect及其回调进行过多说明。

Answer 1

声明为const的变量仍然是变量。在这种情况下，您需要在每个渲染周期中重新定义counting，但是将其设为const意味着不能在渲染周期 中为变量counting重新分配值。因为您在每个渲染周期都重新定义了它，所以您会看到第二个警告。

如果没有其他要求，请counting将其移入效果内。这样就无需将其包含在依赖项数组中，而仅在效果的回调触发时定义。

useEffect(() => {
  let interval = null;

  const counting = () => {
    setCurrentTimeMs(currentTimeMs => currentTimeMs + 1);
  };

  if (isOn) {
    interval = setInterval(counting, 1000);
  } else {
    clearInterval(interval);
  }
  return () => clearInterval(interval);
}, [isOn]);

注1： 我将更新setCurrentTimeMs转换为使用功能状态更新，因为状态取决于先前的状态。

注2： 我还从依赖项数组中删除了currentTimeMs，因此每次状态更新时，您每次设置的时间间隔都不会超过一个isOn是正确的。 [edit] 实际上，这是可以的，因为清除功能可以清除上一个周期中设置的间隔。仍应删除currentTimeMs，尽管不必要。