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