关于react hook useState连续更新对象的问题

import React, {useState} from 'react';
 
export default () => {
    const [obj, setObj] = useState({
        a: 1,
        b: 2
      })
 
    const changeObj = () => {
        // 连续触发2次setObj（实际项目不会这样写，我这样写只是为了模拟连续触发2次setObj带来的问题）
        setObj({...obj, a: 2})
        setObj({...obj, b: 3}) 
    }
   return (<div onClick={changeObj}>
          // 此时页面上显示的值为 {a: 1, b: 3}, 出现该问题的原因是因为useState是异步的，在第二次触发setObj时，obj还是没更新a之前的obj，所以出现该结果
            {JSON.stringify(obj)}
           </div>)
}

setObj((data) => ({...data, b: 3})) 

import React, {useState} from 'react';
 
export default () => {
    const [obj, setObj] = useState({
        a: 1,
        b: 2
      })
 
    const changeObj = () => {
        // 连续触发2次setObj（实际项目不会这样写，为了模拟情况）
        setObj({...obj, a: 2})
        // data标识存储的是更新a后的对象，用这样的方式可以解决连续触发2次带来的问题
        setObj((data) => ({...data, b: 3})) 
    }
   return (<div onClick={changeObj}>
          // 此时页面上显示的值为 {a: 2, b: 3}
            {JSON.stringify(obj)}
           </div>)
}

const onChange = (nextTargetKeys: any) => {
//更新状态
    setTargetKeys(nextTargetKeys);
    let v = 0;
    let n = 0;
    let g = 0;
    //立马使用
   targetKeys.forEach((item: number, index) => {
      v += mockData[item].itemVolume;
      n += mockData[item].itemNw;
      g += mockData[item].itemGw;
    });
       setTopData({ v: Number((v/1000000).toFixed(4)), n: n, g: g });
  };

  useEffect(()=>{
    let v = 0;
    let n = 0;
    let g = 0;
    targetKeys.forEach((item: number, index) => {
      v += mockData[item].itemVolume;
      n += mockData[item].itemNw;
      g += mockData[item].itemGw;
      console.log(v)
    });
    setTopData({ v: Number((v/1000000).toFixed(4)), n: n, g: g });
     },[targetKeys])