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

Question

I get this error in my console. How can I solve this?

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

I'm trying to use the useEffect hook to add the click event listener when the modal is open, and remove it when the modal is closed. The handleClickOutside callback function should close the modal when the user clicks outside of it, by checking if the modalRef element contains the target element of the click event.

Answer 1

Okay so I got the solution. Here it is.

 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;
  }

```