使用 ref() 在 react.js 中显示更新的值而不是以前的值

Question

我正在尝试制作一个呈现更新值的外汇交易应用程序..当值更改时，我想显示显示值已更改的颜色..如果先前的值小于更新值，它应该显示红色、绿色对于相同的更大和蓝色。我正在使用 useref() 来存储值并在使用 effect() 中使用它来获取先前的值。我确实在控制台中获取了先前的值，但是当我显示它时，它显示了更新的值..附上 output 的图像1

const connect = () => {
    ws.current = new WebSocket(URL);

    ws.current.onopen = () => {
      console.log("Connected websocket");
      dispatch({ type: Actions.WEBSOCKET_IS_ALIVE, payload: true });
    };
    ws.current.onmessage = (evt) => {
      const data = JSON.parse(evt.data);
      // console.log("empty effect ", refer.current);
      // console.log("data at empty use effect");
      // console.log("data", data.data);
      const evtData = data.data;
      console.log("evtData", evtData);
      dispatch({ type: Actions.UpdateData, payload: { evtData, refer, temp } });
    };
    ws.current.onclose = (e) => {
      console.log("Socket is closed", e.reason);
    };
  };
  const fetchApi = async () => {
    try {
      const result = await fetch(
        {API-KEY},
        {
          // mode: "no-cors",
          method: "POST",
          headers: {
            // 'Content-Type': 'application/json'

            "Content-Type": "application/x-www-form-urlencoded",
          },
        }
      );
      const res = await result.json();
      //   console.log("res", res);
      dispatch({ type: Actions.SET_DATA, payload: res });
      console.log("after dispatch");
      connect();
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchApi();
  }, []);

 return (
    <div>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th scope="col">Symbol</th>
            <th scope="col">Last Price</th>
            <th scope="col">Bid Size</th>
            <th scope="col">Bid</th>
            <th scope="col">Offer</th>
            <th scope="col">Offer Size</th>
            <th scope="col">Stock Change</th>
            <th scope="col">Stock Change %</th>
            <th scope="col">Open</th>
            <th scope="col">High</th>
            <th scope="col">Low</th>
            <th scope="col">Volume</th>
          </tr>
        </thead>
        <tbody>
          {setData === null ? (
            <Table />
          ) : (
            Object.entries(setData).map((item, index) => {
              {
                /* console.log("item", item); */
              }

              return renderData(item[1]);
            })
          )}
        </tbody>
      </table>
    </div>
  );
}
function reducer(state, action) {
  switch (action.type) {
    case Actions.UpdateData:
      let incomingData = action.payload.evtData;
 
      let newData = { ...state.setData };
      try {
        if (state.setData !== null) {
          Object.entries(state.setData).map((el) => {
           

            if (el[1].stock_symbol === incomingData.s) {
           
              action.payload.temp.current = { ...el[1] };
              console.log(" temp", action.payload.temp.current);
              action.payload.refer.current = action.payload.temp.current;

   

              el[1].stock_change_p = incomingData.pch;

              // .toFixed(2);
              el[1].ask_price = incomingData.ap;
              el[1].ask_volume = incomingData.av;
              el[1].bid_price = incomingData.bp;
              el[1].bid_volume = incomingData.bv;
              el[1].stock_change = incomingData.ch;
              el[1].stock_change_p = incomingData.pch.toFixed(2);
              el[1].stock_current_price = incomingData.c;
              el[1].stock_high = incomingData.h;
              el[1].stock_low = incomingData.l;
              el[1].stock_open = incomingData.o;
              el[1].stock_volume = incomingData.v;

              // console.log(el);
            }
          });
          // console.log("incomingdata", incomingData.s);
          return { ...state, setData: newData };
        }
      } catch (error) {
        console.log(error);
      }

我正在使用 react 使用 reducer 来构建..并通过 web-socket 传递数据。