如何解决使用Echarts的onEvents时报错：Cannot read property 'getDisplayList' of null

根因说明 #

• 代码存在语法错误：useMemo 调用的结尾符号错误，将闭合括号写成了大括号，直接触发编译报错
• 类型定义不匹配：自行定义的ParamsInterface和Echarts官方datazoom事件的回调参数类型不一致，会触发TS类型校验报错
• 潜在闭包陷阱：useMemo依赖数组为空时，如果后续回调逻辑用到其他外部状态，会始终读取到初始化时的旧值

修复后的完整代码 #

import { useMemo, useState } from 'react';
// 引入Echarts官方的事件类型定义
import type { ECElementEvent } from 'echarts';
import EChartsReact from 'echarts-for-react';

interface TimeRange {
    start: number;
    end: number;
}

// 此处替换为你自己的Echarts配置逻辑
const option = {};

const DemoComponent = () => {
    const [time, setTime] = useState<TimeRange>({start: 0, end: 100});

    const onEvents = useMemo(
        () => ({
            dataZoom: (params: ECElementEvent & {start: number; end: number}) => {
                const newTime: TimeRange = {
                    start: params.start,
                    end: params.end,
                };
                setTime(newTime);
            }
        }),
        // setState函数引用天生稳定，不需要加入依赖数组，如有其他用到的外部变量请在此处补充
        []
    );

    return <EChartsReact option={option} onEvents={onEvents} />
};

export default DemoComponent;

额外注意事项 #

• 如果不需要刻意缓存onEvents对象来避免Echarts重渲染，也可以直接在组件内定义onEvents对象传入组件，无需包裹useMemo
• 如果频繁触发dataZoom事件导致页面渲染卡顿，可以给setTime加上节流逻辑，降低状态更新频率

内容的提问来源于stack exchange，提问作者quacks