Apexcharts 更新事件内的 React 状态

如何解决Apexcharts 更新事件内的 React 状态

所以我试图在 Apexcharts 折线图的事件 this.setState 内使用 dataPointMouseEnter 更新布尔状态。但是，我收到一个错误说

Uncaught TypeError: Cannot read property 'filter' of null
    at e.filter (apexcharts.common.js:15731)
    at t.value (apexcharts.common.js:622)
    at t.value (apexcharts.common.js:662)
    at t.value (apexcharts.common.js:1095)

一旦出现此错误，事件 dataPointMouseLeave 将不会触发。

我试图查看确切的问题出在哪里，所以我控制台注销了一些语句，似乎代码在我输入 this.setState({ showYAxis: true })

行时出现此错误

下面是我对这部分的代码

图表事件部分的 options 配置，以及返回组件

state = {showYAxis: false,series: []}

render() {
  const options = {
    chart: {
      events: {
        dataPointMouseEnter: this.onDataPointMouseEnter,dataPointMouseLeave: this.onDataPointMouseLeave,}
    }
  }

  return (
    <Chart
      type="line"
      height="500"
      options={options}
      series={this.state.series}
    />
  );
}

这是两个辅助函数onDataPointMouseEnter和onDataPointMouseLeave的代码

onDataPointMouseEnter = (event,chartContext,config) => {
  const { series,showYAxis } = this.state;

  if(series && series[config.seriesIndex].name === "myYValue") {
    this.setState({ showYAxis: true });
  }
}

onDataPointMouseLeave = (event,config) => {
  console.log("This line should be printed in console when mouse leave data point"); // This line did not get called
}

当我删除行 this.setState({ showYAxis: true }) 时，当鼠标进入和鼠标离开数据点时，这两个函数都会被调用。我正在尝试隐藏/显示 y 轴，我处理这个问题的方法是使用 setState 调用重新渲染，但现在 setState 导致错误。我将不胜感激任何形式的帮助和建议。