reactjs - 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 缺少一个依赖项：'counting'。要么包含它，要么移除依赖数组 react-hooks/exhaustive-deps

我也收到另一个警告：

'counting' 函数使 useEffect Hook（第 39 行）的依赖关系在每次渲染时都发生变化。将它移到 useEffect 回调中。或者，将 'pace' 定义包装到它自己的 useCallback() Hook react-hooks/exhaustive-deps

我以为我已经在 useEffect 回调中调用了。有人可以解释吗？该文档并没有过多地说明 useEffect 及其回调。

标签： reactjs

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。[编辑]实际上，这没关系，因为清理函数会处理清除上一个周期设置的间隔。currentTimeMs尽管没有必要，但仍应删除。