React useEffect 缺少依赖错误，但它存在答案

【问题标题】：React useEffect is missing a depency error, but it is thereReact useEffect 缺少依赖错误，但它存在
【发布时间】：2020-03-17 12:44:52
【问题描述】：

我有这个组件，我正在使用 useRef 和 useEffect 来处理弹出窗口外的点击，以便我可以关闭它。

我添加了 useEffect 需要的两个依赖项，但出现此错误：

The 'handleClickOutside' function makes the dependencies of useEffect Hook (at line 117) change on every render. Move it inside the useEffect callback. Alternatively, wrap the 'handleClickOutside' definition into its own useCallback()

正如您在此处看到的，我正在添加两个依赖项，但它仍然会引发此错误/警告：

  useEffect(() => {
    if (isOverlayOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOverlayOpen, handleClickOutside]);

任何想法如何解决这个问题？

这里是代码框：https://codesandbox.io/s/laughing-newton-1gcme?fontsize=14&hidenavigation=1&theme=dark 问题在 src/components/typeahead 第 100 行

这里是组件代码：

function ResultsOverlay({
  isOpen,
  items,
  selectItem,
  highlightedOption,
  setIsOverlayOpen,
  isOverlayOpen
}) {
  const node = useRef();
  const handleClickOutside = e => {
    if (node.current.contains(e.target)) {
      return;
    }
    setIsOverlayOpen(false);
  };

  useEffect(() => {
    if (isOverlayOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOverlayOpen]);

  function matchedOptionsClass(index) {
    if (highlightedOption === index) {
      return "ph4 list f3 sesame-red list-item pointer";
    }
    return "ph4 list sesame-blue list-item pointer";
  }

  if (isOpen) {
    return (
      <div className="absolute" ref={node}>
        <ul className="w5 mt0 pa0 h5 overflow-scroll shadow-5 dib">
          {items &&
            items.map((item, index) => (
              <li
                onClick={() => selectItem(item)}
                className={matchedOptionsClass(index)}
              >
                {item}
              </li>
            ))}
        </ul>
      </div>
    );
  } else {
    return null;
  }
}

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

两个问题：

首先，按照 linst 告诉您的操作，将函数定义移动到效果中

  useEffect(() => {
      const handleClickOutside = e => {
          if (node.current.contains(e.target)) {
              return;
          }
          setIsOverlayOpen(false);
       };
    if (isOverlayOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOverlayOpen]);

其次，setIsOverlayOpen 是通过props 提供的回调，因此它没有稳定的签名并在每次渲染时触发效果。

假设setIsOverlayOpen 是来自useState 的setter，并且不需要更改它的签名，您可以通过使用useCallback 将处理程序包装在附加的依赖检查层中来解决此问题

  const stableHandler = useCallback(setIsOverlayOpen, [])      

  useEffect(() => {
      const handleClickOutside = e => {
          if (node.current.contains(e.target)) {
              return;
          }
          stableHandler(false);
       };
    if (isOverlayOpen) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isOverlayOpen, stableHandler]);

【讨论】：