Как решить неперехваченную ошибку типа: не удается прочитать свойство ‘getDisplayList’ значения null

#reactjs #typescript #charts #echarts

Вопрос:

вижу ту же ошибку, что и: https://segmentfault.com/q/1010000022589791

Ошибка возникает, когда я использую onEvents аргумент Echarts для вызова внешней функции. Как мне это обойти?

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

 

Ответ №1:

Я предполагаю, что вы используете echarts-для-реакции.

Исходя из этого обсуждения, вам следует избегать вызова setState непосредственно из onEvents обработчика. Вместо этого определите обработчик извне и оберните его useCallback :

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

const onEvents = {
    dataZoom: onDataZoom
}
 

Комментарии:

1. Спасибо! Я попробовал это, и это работает. Я также только что обновил вопрос, чтобы включить возможность его использования useMemo (это было то, что я попробовал сначала, прежде чем увидеть ваш ответ, хотя я думаю, что ваш ответ имеет больше смысла useCallback ).