react hook使用useState()更新状态（state）异步导致不能及时读取更新之后的数据

1、场景描述

我在更新一个状态之后要立马用这个状态去更新其他状态
我的源代码

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 });
  };

如果是vue，这里是没有问题的 ，但是这是react~这里的数据还没更新，取到的还是旧数据
这里加个setTimeout延迟执行就是新的数据。这是为什么了？
原因：
vue是同步更新状态，异步视图，当状态变化是阻塞更新完成之后执行后继逻辑，
react是异步更新状态，setState 是异步方法，所以不会阻塞！

2、处理办法：

添加一个 副作用（useEffect()）

  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])

顺便发表感受，还是vue的状态更新直接、简便！
ok！