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 useEffect缺少一个依赖项：“计数”。要么包含它，要么删除依赖数组react/react。

我还收到了另一个警告：

‘useEffect’函数使useEffect钩子(在第39行)的依赖项在每次呈现时都发生变化。将其移动到useEffect回调中。或者，将'pace‘定义封装到它自己的useCallback() Hook react钩子/详尽-deps中。

我以为我已经在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: I还从依赖项数组中删除了currentTimeMs，因此每次状态更新时，当isOn为true时，不要设置超过一个间隔。编辑实际上，这是可以的，因为清理函数处理清除前一个周期设置的间隔。仍然应该删除currentTimeMs，因为它不是必要的。

​

​