在分散的区域内,Onmousedown多次发生火灾

我在工作中使用React,我们使用谷歌图表来展示一些数据。现在显示数据工作正常。它是一组数据点,可以通过选中一些复选框来过滤。

当您单击一个复选框时,将重新评估整个数据集,以便取出与过滤器不匹配的条目。然后将过滤后的数据放在单独的集合中,然后将过滤后的数据集放回图表对象中进行显示。

现在,当没有应用过滤器并且显示所有数据时, 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);
          }
        },
      );
    },
  },
]}
/>

是因为我需要使用不同的事件,还是因为我处理的事件都是错误的?或者是因为我把数据换了出来,缓存才是罪魁祸首?我有点不知所措。