ChartJS onClick调用react-router跳转时抛出handleEvent未定义错误

• 核心触发逻辑：点击事件触发路由跳转时，当前承载Chart的React组件会立即卸载，react-chartjs-2会同步销毁chart实例，但ChartJS内部的事件执行队列还没跑完，后续执行图例的afterEvent钩子时，实例上的legend属性已经被销毁为undefined，调用handleEvent方法就会抛出类型错误。
• 版本兼容问题：你使用的react-chartjs-2@4.2.0对应要求的chart.js peerDependency版本是v4.x，当前安装的chart.js@3.8.0属于跨大版本不兼容，实例销毁、事件绑定的逻辑存在差异，会提升这类异常出现的概率。

按以下顺序操作即可解决问题：

• 首先对齐依赖版本，将chart.js升级到匹配的v4版本：

npm i chart.js@^4.0.0

• 调整点击事件逻辑，等当前Chart的事件循环执行完成后再触发路由跳转，同时增加元素判断，避免点击图表空白区域触发无意义跳转：

const navigate = useNavigate();
const options: ChartOptions<"bar"> = {
  onClick: (_, elements) => {
    // 仅点击到柱状条时执行跳转
    if (elements.length > 0) {
      // 用微任务延迟执行，等当前事件队列清空、Chart内部逻辑跑完再跳转卸载组件
      queueMicrotask(() => navigate("/path"));
    }
  }
}

• （可选配置）如果业务不需要图例，直接在配置中关闭图例，从根源上避免legend相关的事件逻辑执行：

const options: ChartOptions<"bar"> = {
  plugins: {
    legend: {
      display: false
    }
  },
  // 其余点击等配置保持不变
}

注意：如果是自行封装的Chart组件而非直接使用react-chartjs-2提供的组件，记得在useEffect的清理函数中主动调用chart.destroy()，避免组件卸载后残留的事件回调继续执行。

内容的提问来源于stack exchange，提问作者eko