在 React 中使用 Hooks 设置点击事件的时间间隔不会使用更新的 state 值

Question

I am trying to create a filter dropdown menu that hides itself if the user did not close it manually and has moved their mouse away from the filter after 1 second.

The problem is that the mouseInside boolean state never gets changed to false inside the interval. I believe this is because the react component gets re-rendered but not entirely sure.

I don't know how to fix it or how I might be using state vs local variables incorrectly.

I'm using TypeScript in React with hooks:

const Filter: React.FC = () => {
  const [shown, setShown] = useState<boolean>(false);
  const [mouseInside, setMouseInside] = useState<boolean>(false);
  
  let interval: NodeJS.Timeout | null = null;

  const handleToggle = () => {
      setShown(!shown);
      
      interval = setInterval(() => {
        console.log(mouseInside);

        // mouseInside is permanently true
        if (!mouseInside && interval) {
           // this never gets triggered
           clearInterval(interval);
           setShown(false);
           console.log("Finished!");
        }
      }, 1000);
    }
  };

  return (
    <div
      style={{ width: 100, height: 100, backgroundColor: "lightgray" }}  
      onClick={handleToggle}
      onMouseEnter={() => setMouseInside(true)}
      onMouseLeave={() => setMouseInside(false)}
    >
        <p>Click me!</p>
        
        {shown && <div>drop down here...</dv>}
    </div>
    );
};

I need mouseInside to eventually change to false when the user leaves the filter box. The onMouseLeave event is definitely being triggered but it's the React side of things I think is causing the issue.

Maybe I need to use useEffect ? I don't know the best approach though on how to use this with setInterval .

Answer 1

In order to "subscribe" a callback function to a change in state, you can definitely use the useEffect hook:

function automaticallySetMouseOutside() {  
  setTimeout(() => {
    if (mouseInside) {
      setMouseInside(false);
    }
  }, 1000);
}

useEffect(automaticallySetMouseOutside, [mouseInside]);

useEffect 's second argument subscribes automaticallySetMouseOutside to get called whenever mouseInside is changed.

While this code is meant to exemplify the use of this hook, it's not accurate - as it can close the menu while the user is still inside.
If you want a full solution to your issue, please check this CodeSandBox .

Answer 2

While declaring the interval action inside handleToggle , it lives inside its own scope, with no binding to the actual state,

const handleInterval = interval => { 
        console.log(mouseInside);
        if (!mouseInside && interval) {
           // this never gets triggered
           clearInterval(interval);
           setShown(false);
           console.log("Finished!");
        }
      }
   
const handleToggle = () => {
      interval = setInterval(() => {
        () => handleInterval(interval),
      }, 1000);
    }
  };

Answer 3

I ended up using part of what @GalAbra suggested but I wanted to only create the interval when the user clicks on the toggler and only if the menu was open:

  const [shown, setShown] = useState<boolean>(false);
  const [mouseInside, setMouseInside] = useState<boolean>(false);

  useEffect(() => {
    let interval: NodeJS.Timeout | null;

    if (shown) {
      interval = setInterval(() => {
        if (!mouseInside && interval) {
          setShown(false);
        }
      }, 500);
    }

    return () => {
      if (interval) clearInterval(interval);
    };
  }, [shown, mouseInside]);

  return (
    <div
      style={{ width: 100, height: 100, backgroundColor: "lightgray" }}  
      onClick={() => setShown(!shown)}
      onMouseEnter={() => setMouseInside(true)}
      onMouseLeave={() => setMouseInside(false)}
    >
        <p>Click me!</p>        
        {shown && <div>drop down here...</dv>}
    </div>
  );