我如何在 React 的 useEffect 中安排事件

Question

In main Application file (App.js) I have this code, the <button> here can unmount the "Dropdown" component

return (
    <div>
      <button
        onClick={() => {
          console.log("App button"); // First
          setShowDropDown(!showDropDown);
        }}
      >
        Toggle Dropdown
      </button>
      {showDropDown ? (
        <Dropdown
          selected={selected}
          onSelectedChange={setSelected}
          options={options}
        />
      ) : null}
    </div>
  );

In Dropdown component file (Dropdown.js) This event onBodyClick make the Dropdown menu not active when click on any place unless the Dropdown menu itself. The goal here is to cancel the event by Cleanup function in useEffect when I click on the button. The problem is: when I click the button, the order of what happened is something like that:

• First: The button onClick event and "unmounting".
• Second: The onBodyClick event.
• Finally: Cleanup. This order makes a problem when I clicked on the button, That's because the event happening after unmounting. How can I solve that? the error: Cannot read property 'contains' of null

  useEffect(() => {
    const onBodyClick = (event) => {
      console.log("event");   // Second
      if (ref.current.contains(event.target)) {
        return;
      }
      setOpen(false);
    };
    document.body.addEventListener("click", onBodyClick);
    return () => {
      console.log("cleanup");  // Finally
      document.body.removeEventListener("click", onBodyClick);
    };
  }, []);

Answer 1

Sounds like you just need to check if the ref exists first:

const onBodyClick = (event) => {
  if (!ref.current) {
    // Component is unmounting
    // below line could be used or commented out; since the component is unmounting,
    // the state should not make a difference
    // setOpen(false);
    return
  }
  if (ref.current.contains(event.target)) {
    // Component is not unmounting, and click was inside ref
    return;
  }
  // Component is not unmounting, and click was outside ref
  setOpen(false);
};

Answer 2

I have the same problem and this is working for me

if(this.wrapperRef && !this.wrapperRef.contains(event.target) {
 this.setState({visibility: false});
}

I check if wrapperRef exists and I check if the wrapper contains the Html element

I know you are using react hooks, but the idea is the same.