#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
).