近日在开发老项目的过程中,遇到如下问题:
页面大致描述:
父组件页面中有6个不同的echarts图标,分别通过父组件传入对应的props——chartData来展示各自对应的数据。
简要说下代码功能吧:下图是父组件请求拿到所有子组件数据的函数:
每通过页面下拉框选择一个设备,就会调用下图函数去请求对应数据
拿到所有的数据后存入chartsData变量中,然后通过getChartData函数对chartsData进行map操作进行二次处理,从而赋值到每个echarts图表props对应的变量中,是同步的过程。
之后通过ref拿到图表实例,调用initCharts函数去执行图表显示数据的一系列操作(初始化实例、setOption等)。
此时问题出现了:
当刷新页面后,第一次选择了一个设备,成功发送请求并也拿到了数据,但是页面并没有显示出对应的数据,显示为空。
对请求的值进行打印:父组件打印出来的数据和接口返回的一致,getChartData函数的处理也没问题,但是在子组件打印props中父组件传递过来的数据时,却是初始值null。
接着在选择一个设备,成功显示了对应的数据。
多次实验,发现都是在页面刷新后第一次选择设备后无法正常显示数据。
猜想:
从拿到数据,并对数据进行二次处理,再传递给子组件的过程是需要花费一定时间的,很可能存在子组件还没有来得及拿到父组件处理好的最新数据,就进行了页面的渲染。
验证:
延时触发子组件处理函数。此时,数据能够正常显示了,猜想结果成立。
解决方案:
肯定不能在项目代码中保留这样的延时处理方式,所以采用vue内置的nextTick方法,把初始化图标的操作延时到下一次DOM更新之前,这样就能保证下一次DOM更新时能够拿到最新的数据。