CODEWITHSUNDEEP
reactjstypescriptchartsecharts
quacks
quacks

Reputation: 21

How to solve uncaught typeerror: cannot read property 'getDisplayList' of null

seeing the same error as: https://segmentfault.com/q/1010000022589791

Error occurs when I use the the onEvents argument of Echarts to call on an external function. How do I get around it?

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} />

Upvotes: 1

Views: 547

Answers (2)

pthomaid
pthomaid

Reputation: 177

In a similar case (Uncaught TypeError)

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

when setting state from inside

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

I fixed it by wrapping the set state call in setTimeout.

Upvotes: 0

lbsn
lbsn

Reputation: 2412

I'm assuming you're using echarts-for-react.

Based on this discussion, you should avoid calling setState directly from the onEvents handler. Instead define the handler externally and wrap it with useCallback:

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

const onEvents = {
    dataZoom: onDataZoom
}

Upvotes: 2

Related Questions