In react js, how to get correct state between click and mouseleave in short time-CodePudding

There is a button, I clicked the button and change some state, and leave the button immediately after clicking the button, you will found the state is doesn't change.

i want the newest state, when mouseLeave event is called




const App = (props) => {
  var [visible, setVisible] = React.useState(false);

  return (
    <button
      onClick={() => setVisible(true)}
      onm ouseLeave={() => console.log(visible)}
    >
      test
    </button>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

CodePudding user response：

in order to get the latest state of the visible variable when the onm ouseLeave event is called, you need to move the call to setVisible(true) inside of the onm ouseLeave event handler, like this:

const App = (props) => {
  var [visible, setVisible] = React.useState(false);

  return (
    <button
      onClick={() => console.log(visible)}
      onm ouseLeave={() => {
        setVisible(true);
        console.log(visible);
      }}
    >
      test
    </button>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

CodePudding user response：

how are you determining onm ouseLeave is not triggered? Have you tried adding console.log statements? I'm wondering if instead you are experiencing a bad ordering for onm ouseOver/onMouseOut because the setting of states is not a synchronous action. I created a simple react component and I couldn't easily reproduce. – noveyak

It happen sometimes, that when leaving element onm ouseLeave function is not called.. Yes i tried with logging and function is not being called.. then how should i implement hover event? – zazmaister

You could try onm ouseOver/onMouseOut to see if it works better for you since I think these events are better supported although the behavior of this is slightly different so might not be suitable for your application. – noveyak

CodePudding user response：

You can use prevState to see what is gonna be set in visible state

 onm ouseLeave={()=>{
  setVisible((prevState) => {
       
        console.log('visibility is : ',prevState);
      })
 }}

so here prevState is exactly what is newest state in visible before rerendering

CodePudding user response：

To get the newest state when the onm ouseLeave event is called, you can move the call to setVisible inside the onm ouseLeave event handler. This will ensure that the visible state is updated before the console.log statement is executed.

Example:

const App = (props) => {
  var [visible, setVisible] = React.useState(false);

  return (
    <button
      onClick={() => setVisible(true)}
      onm ouseLeave={() => {
        setVisible(true);
        console.log(visible);
      }}
    >
      test
    </button>
  );
};

Alternatively, you can use the useEffect hook to update the visible state and log it to the console when the onm ouseLeave event is triggered.

Example:

const App = (props) => {
  var [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    if (visible) {
      console.log(visible);
    }
  }, [visible]);

  return (
    <button
      onClick={() => setVisible(true)}
      onm ouseLeave={() => setVisible(true)}
    >
      test
    </button>
  );
};