react & react-chartjs 2中出现类型错误(类型为“undefined”的参数无法分配给---)

pepwfjgg  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(123)

我已经使用react-chartjs-2用于一些条形图图表,我正在创建onClick函数,例如,当我们单击特定条形图时,函数应使用与文档链接https://react-chartjs-2.js.org/docs/working-with-events/中提到的相同的方法工作
但它在引用我代码时显示错误

import React,{useRef} from "react";
import {
  Chart as ChartJS,
  BarElement,
  Tooltip,
  LinearScale,
  CategoryScale,
  ChartEvent 
} from "chart.js";
import { Bar,getDatasetAtEvent  } from "react-chartjs-2";
import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";

ChartJS.register(BarElement, Tooltip, LinearScale, CategoryScale);
const labels = [
  "January",
  "February",
  "January",
  "February",
  "January",
  "February",
  "January",
  "February",
];

export const options = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: {
      display: false,
    },
  },
};

export const data = {
  labels,
  datasets: [
    {
      label: "Dataset 1",
      data: [345, 229, 10, 110, 20, 30, 40, 50],
      backgroundColor: "#3F3E57",
      barThickness: 60,
      borderRadius: 8,
      hoverBackgroundColor:"#0661FF"
    },
  ],
};
const Chart = () => {
   const chartRef = useRef();
   const onClick = (e:React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
    console.log(getDatasetAtEvent(chartRef.current, e));
   }
  return (
    <div className="chart">
      <div className="chart__title">
        <h4>Montly Revenue</h4>
        <h2>$1500</h2>
      </div>
      <div className="chart__main">
        <Bar options={options} data={data} ref={chartRef} onClick={onClick}/>
      </div>
    </div>
  );
};

export default Chart;

所有工作正常,但在这一点上显示错误//此处
错误记录档

Argument of type 'undefined' is not assignable to parameter of type 'Chart<keyof ChartTypeRegistry, (number | ScatterDataPoint | BubbleDataPoint | null)[], unknown>'.
    51 |    const chartRef = useRef();
    52 |    const onClick = (e:React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
  > 53 |     console.log(getDatasetAtEvent(chartRef.current, e));
       |                                   ^^^^^^^^^^^^^^^^
    54 |    }
    55 |   return (
    56 |     <div className="chart">

我已经搜索了很多,但没有得到类似的错误

syqv5f0l

syqv5f0l1#

解决方案是在useRef中使用任何类型,这样它就可以获取任何类型的引用,这样代码就变成

const chartRef = useRef<any>(); //just use any type here and problem resolved
const onClick = (e:React.MouseEvent<HTMLCanvasElement, MouseEvent>) => {
  console.log(getDatasetAtEvent(chartRef.current, e));
}

相关问题