OnMouseDown 在 Scatterplot 中觸發不止一次

Question

我在工作中使用 React，我們使用 Google Charts 來展示一些數據。 現在顯示數據工作正常。 這是一堆數據點，可以通過選中一些復選框來過濾。

單擊復選框時，將重新評估整個數據集，以便刪除與過濾器不匹配的條目。 然后將過濾后的數據放在一個單獨的集合中，然后將過濾后的數據集放回 Chart 對象中進行顯示。

現在，當沒有應用過濾器並顯示所有數據時， onmousedown事件完全正常觸發。 就一次。 但是，當我應用過濾器（或任何數量的過濾器）時， onmousedown事件會多次觸發。 有時，事件會從我沒有點擊的點返回數據。 但每次它也會返回我點擊過的數據，只是多次。

我不太明白這種行為：

<Chart
chartType="ScatterChart"
width="100%"
height="480px"
loader={<div>Loading Chart</div>}
data={filteredData}
options={chartOptions}
rootProps={{ 'data-testid': '1' }}
chartEvents={[
  {
    eventName: 'ready',
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      google.visualization.events.addListener(
        chart,
        'onmousedown',
        e => {
          const { targetID } = e;
          if (targetID.includes('point')) {
            const tableEntry = FlowUtil.getChartEntryOnClick(
              filteredData,
              targetID,
            );
            handleOnMouseClick(tableEntry);
          }
        },
      );
    },
  },
]}
/>

是因為我需要使用不同的事件，還是因為我處理的事件全都錯了？ 還是因為我正在更改數據而緩存是罪魁禍首？ 我在這里有點想法。

Answer 1

該事件被多次觸發，
因為它被多次添加，
每次圖表的'ready'事件觸發時。

在添加偵聽器之前，刪除所有先前添加的偵聽器，
通過使用 --> google.visualization.events.removeAllListeners(chart);

看下面的片段...

chartEvents={[
  {
    eventName: 'ready',
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();

      google.visualization.events.removeAllListeners(chart);

      google.visualization.events.addListener(
        chart,
        'onmousedown',
        e => {
          const { targetID } = e;
          if (targetID.includes('point')) {
            const tableEntry = FlowUtil.getChartEntryOnClick(
              filteredData,
              targetID,
            );
            handleOnMouseClick(tableEntry);
          }
        },
      );
    },
  },
]}