Javascript React-Useffect挂钩中的清除Lodash去盎司功能

我正在尝试使用Lodash的Debounce函数和一个自定义挂钩，以防止窗口调整大小事件触发得太频繁。虽然钩子按预期工作，但我正在努力正确清理从React-useEffect钩子返回的函数。这将导致浏览器控制台中出现以下错误，以及单页应用程序中整个用户会话中存在的事件侦听器

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

我知道有很多方法可以滚动自定义去盎司钩子，但是为了这个大量使用Lodash的项目，如果可能的话，我更愿意使用去盎司函数

function getSize() {
  return {
    width: window.innerWidth,
    height: window.innerHeight,
  };
}

export default function useWindowSize(debounceDelay = 500) {
  const [windowSize, setWindowSize] = useState(getSize);

  useEffect(() => {
    function handleResize() {
      setWindowSize(getSize());
    }

    const debounced = debounce(handleResize, debounceDelay);
    window.addEventListener(`resize`, debounced);

    return () => window.removeEventListener(`resize`, debounced.cancel());
  }, [debounceDelay]);

  return windowSize;
}

---

您直接调用的是取消函数，而不是。您应该只使用

debounced

，这就是您在侦听器中添加的内容：

return () => {
  window.removeEventListener('resize', debounced)
}

在大多数情况下，只需删除事件即可：

return () => {
  window.removeEventListener('resize')
}

---

无需通过

去盎司。取消（）。删除事件侦听器时，需要将相同的引用传递给创建侦听器时使用的函数。您还可以取消当前的取消公告功能

useEffect(() => {
    function handleResize() {
      setWindowSize(getSize());
    }

    const debounced = debounce(handleResize, debounceDelay);
    window.addEventListener(`resize`, debounced);

    return () => {
         debounce.cancel()
         window.removeEventListener(`resize`, debounced); // use debounced directly
     }
  }, [debounceDelay]);

清理时不需要cancel（）。如果不取消调用，则已在进行的去盎司函数调用将导致警告。谢谢。演示如何使用
cancel（）
来防止取消公告函数触发也很有帮助。您的第一个选项有效，但第二个选项返回一个TypeError，因为
removeEventListener
需要至少两个参数，类型和侦听器。我在大多数情况下说过。在您的情况下，第一个选项将起作用