如何解决未捕获的类型错误：无法读取 null 的属性“getDisplayList”

Question

看到与以下相同的错误：https://segmentfault.com/q/1010000022589791

使用Echarts的

onEvents

参数调用外部函数时出现错误。我该如何解决它？

interface ParamsInterface {
    type: "datazoom";
    start: number;
    end: number;
}

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

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

const onEvents = useMemo(
    () => ({
        dataZoom: (params: ParamsInterface) => {
            const newTime: TimeRange = {
                start: params.start,
                end: params.end,
            }
            setTime(newTime);
        }
    }), []
}

return <Echarts option={option} onEvents={onEvents} />

Answer 1

我假设你正在使用 echarts-for-react。

根据 this 的讨论，您应该避免直接从

setState

处理程序调用

onEvents

。相反，在外部定义处理程序并用

useCallback

:

包装它

const onDataZoom = useCallback((params: ParamsInterface) => {
        const newTime: TimeRange = {
            start: params.start,
            end: params.end,
        }
        setTime(newTime);
    }, []);

const onEvents = {
    dataZoom: onDataZoom
}

Answer 2

在类似的情况下（未捕获的类型错误）

Uncaught TypeError: Cannot read properties of null (reading 'trigger')

从内部设置状态时

echartsInstance.on('mousemove', ()=>{})

我通过将设置状态调用包装在

setTimeout

中来修复它。