事件干扰了胜利图表的交互式图例

Question

我正在使用Victory图表构建一个交互式的图例，该图已经很不错了，但是我正在努力解决事件似乎相互干扰的问题。

以下是创建事件的代码：

    const events = series.map((_, idx) => {
      return {
        childName: ["chart-legend"],
        target: ["data", "labels"],
        eventKey: String(idx),
        eventHandlers: {
          onClick: () => {
            return [
              // First mutation is to clear previous style mutation on ALL keys
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                eventKey: "all",
                mutation: props => null
              },
              // Second mutation is to hide series (doing so once for all keys of that item)
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                mutation: props => {
                  if (!this.state.hiddenSeries.delete(idx)) {
                    // Was not already hidden => add to set
                    this.state.hiddenSeries.add(idx);
                  }
                  this.setState({
                    hiddenSeries: new Set(this.state.hiddenSeries)
                  });
                  return null;
                }
              }
            ];
          },
          onMouseOver: () => {
            return [
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                eventKey: "all",
                mutation: props => ({
                  style: { ...props.style, fillOpacity: 0.5 }
                })
              }
            ];
          },
          onMouseOut: () => {
            return [
              {
                childName: ["chart-bars-" + idx],
                target: "data",
                eventKey: "all",
                mutation: p => null
              }
            ];
          }
        }
      };
    });

完整的工作代码：https://codesandbox.io/s/interactive-legend-lsxff?fontsize=14

如您所见，onClick事件正在修改反应状态以隐藏相关的条形图。 onMouseOver和onMouseOut旨在修改/恢复条形的样式。

几乎可以运行，除了如果我单击图例项（以隐藏条）然后再次单击（向后显示），则它不再响应onMouseOver事件。

如果我单击其他图例项，则第一个将再次按预期响应，而另一个则没有。

关于可能是什么原因的任何想法？我怀疑这与触发重新绘制的反应状态更改有关，因此重新计算了事件，但我正在努力解决该问题。