使用 UseState hook 等待 State 更新，然后在函数内运行代码

Question

const startLive = () => {
    // connect to websocket only on start button
    
     setliveChartState({
      ...liveChartState,
      liveActive: !liveChartState.liveActive,
      historicLiveActive: true,
      start: new Date(),
    });

/*- - - -after updation this code needs to run - - - >*/
    const { ws, liveActive } = liveChartState;
    
    // if clicked on stop then close websocket
    if (!liveActive && ws) {
      ws.close();
    clearLiveInterval();
    }
    // if clicked on  start and websocket close then connect
    if ((!ws || ws.readyState === WebSocket.CLOSED)&& liveActive) connect();
    fetchData("historic");

/*----------*/
  };

I have a functional component

The startlive function gets called when start button is clicked... This function is used to update the state and then execute the code which comes later as mentioned.

But it runs when setlivechartstate has not even completeted the updation.

I do not want to use Use effect hook as i just want to run the code only when button is clicked as it is working both as start and stop and also liveActive is getting changed in other functions also.. So using useEffect with this dependency created problem

What is the best way i can make this function work and only run the code after the updation is done

Answer 1

It would be better if you use useEffect . and for your issue you can check inside useEffect that if button is clicked : true then only useEffect will execute your updation code.

useEffect(() => {
 if (ButtonClicked) {
   // do updation stuff
  }
}, [ButtonClicked]);

Answer 2

Considering your use case it would be great if you have a look at async/await functions and JavaScript Promises . In my opinion a good way to perform the update will be to maybe wrap your setliveChartState() function inside an async function, something like:

async function setLiveChart() {
   setliveChartState(...)
}

And then call your async setLiveChart() function inside your const startLive = () => {} like:

const startLive = () => {
    // connect to websocket only on start button
    
     setLiveChart().then(() => {

     /*- - - -after updation this code needs to run - - - >*/
    const { ws, liveActive } = liveChartState;
    
    // if clicked on stop then close websocket
    if (!liveActive && ws) {
      ws.close();
    clearLiveInterval();
    }

    // if clicked on  start and websocket close then connect
    if ((!ws || ws.readyState === WebSocket.CLOSED)&& liveActive) connect();
    fetchData("historic");

   /*----------*/
  }
};

You can also chain multiple then() callbacks like

setLiveChart()
  .then(() => {})
  .then(() => {})
  .then...