日常随笔: 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.push(item);return prev;}, []);setMaxCount(maxCount);setHeatMapData(hData);};

进入页面时调用的钩子

// 在进入页面的时候对heatmapData进行更新
useEffect(() => {handleNavChange && handleNavChange(2)();updateAccurate();updateModDataDis();}, []);

调用的图函数(稍微小小的封装了一下)

<MyChart//　按照我预想　应该在调用了updateModeDataDis函数之后，这个heatMapData更新的时候应该会更新调用MyChart中的shouldUpdate函数data={heatMapData}xLabelName="幅照度"yLabelName="温度"xLabelValue="irr"yLabelValue="temp"chartType="polygon"labelValue="quantity"containerId="heatmap"xType="cat"yType="cat"xAxisValues={xAxisValue}yAxisValues={yAxisValue}containerWidth="100%"containerHeight="200px"
></MyChart>

MyChart组件中的componentWillUpdate生命周期函数

  componentWillUpdate() {const { data } = this.props;const { chart } = this.state;// 用于debugconsole.log('chartData=', data);//　@ts-ignorechart !== null && chart.changeData(data);}

3. 问题debug

当页面刷新时, 发现图中并没有任何的显示数据

我们通过React Chrome 插件进行debug

这里可以发现其实数据已经传到了组件内,但是组件没有进行更新，通过组件内的willUpdate函数中的console.log看下data更新后是否有进来

页面debug

这里发现一开始确实更新了updateMap,但是当异步修改heatmapData的值之后, 在componentWillUpdate函数中并没有捕获到更新的感觉

4. 问题解决

用了一个笨办法,问题解决了, 强制调用setF更新一次这个函数组件

// 添加了一个无用的状态量
const [_f, setF] = useState<number>(0);//　当heatMapData更新的时候更新这个状态量
useEffect(() => {setF(_f + 1);
}, [heatMapData]);

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

[译] Don’t call me, I’ll call you：使用 Redux-Saga 管理 React 应用中的异步 action （上）...
原文地址:Don't call me, I'll call you: Side effects management with Redux-Saga (Part 1) 原文作者:David Dvora ...
android 异步刷新方法,android应用中实现异步更新UI的方法有哪些
android应用中实现异步更新UI的方法有哪些发布时间:2020-12-07 17:12:00 来源:亿速云阅读:144 作者:Leah android应用中实现异步更新UI的方法有哪些?相信很 ...
python更新数据库表的时间字段_python更新数据库中某个字段的数据(方法详解)
连接数据库基本操作,我把每一步的操作是为什么给大家注释一下,老手自行快进. 请注意这是连接数据库操作,还不是更新. import pymysql #导包 #连接数据库 db = pymysql.con ...
React项目中请求跨域解决方法
React项目中请求跨域解决方法今天经理给我了一个React项目地址,让我拉下来并跑起来,拉下来运行起来后,发现所有的请求都失败了,并且都是由于跨域问题导致的.花了点时间,解决了这个问题,在这里记录 ...
Flutter StreamBuilder 异步更新数据
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程 ...
Flutter ValueNotifier 异步通信、ValueListenableBuilder异步更新数据
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒随时随记每日积累随心而过 [x2]各种系列的视频教程 ...
php psr4 控制器调用模型,控制器中调用模型更新数据
> ## 在控制器中调用模型进行更新数据 ### 1. 查找并更新(需要知道主键,不需要构造键名和表字段对应的数组) ``` $user = User::get(1); $user->na ...
php更新数据步骤,Thinkphp5模型更新数据方法
thinPHP5模型更新数据的方法有两个一个是update,一个是save方法,下面看实际案例代码. namespace app\index\controller; use think\Control ...
WinForm 界面异步更新数据(方式二)
在WINForm开发过程中,我们经常遇到填充比较多的数据到界面时,有时候界面卡死啦,这时候我们最好的办法是采用线程来对数据进行收集,然后再体现在界面上. 1.第一种是比较繁琐的采用异步进行操作. 创建 ...

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

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

1. 问题叙述

2. 代码分析

3. 问题debug

4. 问题解决

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

最新文章

热门文章