React Hook“useEffect”被有条件地调用。 React Hooks 必须在每个组件渲染中以完全相同的顺序调用

Question

我在控制台中收到此错误。 我该如何解决这个问题？

const modalRef = useRef(null);

 

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        close();
      }
    };
    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, [close, modalRef]);

我正在尝试使用 useEffect 挂钩在模态打开时添加点击事件侦听器，并在模态关闭时将其删除。 handleClickOutside 回调 function 应该在用户单击模态框外部时关闭模态框，方法是检查 modalRef 元素是否包含点击事件的目标元素。

Answer 1

好的，所以我得到了解决方案。 这里是。

 useEffect(() => {
    function handleClickOutside(event) {
      if (modalRef.current && !modalRef.current.contains(event.target)) {
        close();
      }
    }

    document.addEventListener("click", handleClickOutside);
    return () => {
      document.removeEventListener("click", handleClickOutside);
    };
  }, []);

  if (!props.show) {
    return null;
  }

```