Get `Uncaught TypeError: Cannot read property 'getDisplayList' of null` warning

[baurine]

Hi,

After adding the onEvents prop to ReactEchartsCore component, I always get the Uncaught TypeError: Cannot read property 'getDisplayList' of null warning in the browser console when clicking the legend. I tried but failed to find the root cause, do you have any idea? Thanks in advance.

The core code:

  const [selectedLegends, setSelectedLegends] = useState({})

  const handleLegendChange = ({ name, selected }) => {
    setSelectedLegends(selected)
  }

  const opt = useMemo(() => {
    ...
    legend: {
      ...
      selected: selectedLegends
    ...
  )

      <ReactEchartsCore
        echarts={echarts}
        notMerge={true}
        lazyUpdate={true}
        style={{ height: HEIGHT }}
        option={opt}
        theme={'light'}
        onEvents={{ legendselectchanged: handleLegendChange }}
      />

The details are in here: https://github.com/pingcap-incubator/tidb-dashboard/pull/663/commits/886875f3e87b2e2af01dab968c561a0f57c25d13 , related PR: https://github.com/pingcap-incubator/tidb-dashboard/pull/663

The warning screenshot:

[baurine]

请问您解决了吗？我也遇到了相同问题

Nope. But I found change notMerge props to its default value false can help me remove the onEvents props in the above case.

[xiyanfeixu]

I have changed notMerge to false ,but still have warnings like the above case.

[findxc]

I find that if you call setState in onEvents listener, the error occurs. Maybe the error has something to do with the React re-render.

const onLegendSelected = () => {
  // the setCount triggers React re-render, when you click lengend, the error occurs
  setCount(c => c + 1);
};

const onEvents = {
  legendselectchanged: onLegendSelected,
};

version: echarts: 4, echarts-for-react: ^2.0.16

[dolimovkhumoyun]

Has anyone found solution for this issue? @hustcc

[hustcc]

Can someone give me a live demo?

[findxc]

@hustcc https://codesandbox.io/s/echarts-for-react-issues-366-ru14m

[hustcc]

@findxc in FC, set onLegendSelected in memo, keep the function with same ref.

[findxc]

I have updated my demo https://codesandbox.io/s/echarts-for-react-issues-366-ru14m , and it can work now ✌️✌️✌️. The key point is to wrap your event listeners with useMemo or useCallback.

const onLegendSelected = useCallback((params) => {
  const { selected } = params
  setSelected(selected)
}, [])

Many thanks to hustcc 👍👍👍