echarts在react中二次渲染失败的bug解决.

275 阅读1分钟

这是一个不稳定触发的奇怪bug

1.在路由的根页面组件中,useEffect中调用init.init能正常渲染,并不会触发bug.

2.在根页面组件的子组件中,useEffect中调用init.init不能正常渲染,会触发bug.

解决:在echarts.init外套一个setTimeout,将它的执行时机往后拖延一个任务队列.

useEffect(() => {
    setTimeout(()=>{
        // 基于准备好的dom,初始化echarts实例
        var myChart = myECharts.init(domEChartsRef.current);
        //...其它代码省略
    })
})