日常随笔: React useEffect中使用异步更新数据方法遇到的问题

开发随笔：react hooks 异步更新的问题

1. 问题叙述

在使用antd/G2图表更新的时候发现：在useEffect中通过异步函数对图表渲染的data进行更新, 但是由于第一次更新后,数据是延迟更新的,所以好像数据并没有实时进行更新.

2. 代码分析

• 定义了一个heatmapData

  const [heatMapData, setHeatMapData] = useState<IHeatMapItem[]>([]);

• 异步更新函数

//　异步更新函数
const updateModDataDis = async (module: moduleType = 'aSiMicro03038') => {
    //　从后端接口获取数据
    const { data: res } = await getMoDataDis(module);
    const { data, maxCount } = res;
    const hData = data.reduce<IHeatMapItem[]>((prev, _curr) => {
      const curr = _curr as number[];
      const item: IHeatMapItem = {
        irr: curr[0],
        temp: curr[1],
        quantity: curr[2]
      };
      prev.p