Question

我有这个组件，并且我正在使用useRef和useEffect来处理弹出窗口之外的单击，以便将其关闭。

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

myvar === null || myvar === undefined

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

isNil(myvar)

有什么办法解决此问题吗？

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

这里是组件代码：

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()

Answer 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的设置者，并且不需要更改其签名，则可以通过使用useCallback将处理程序包装在附加依赖项检查层中来解决此问题。 / p>

  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]);

React useEffect缺少依赖性错误，但是在那里

1 个答案: