React项目使用Chart.js无法正常显示Doughnut环形图问题求助

问题根源 #

• 你给<Doughnut>组件的data属性直接传入了cleanData这个异步函数本身，而非函数执行后返回的图表数据。异步函数执行后默认返回Promise对象，Chart.js无法识别这类非预期的格式，所以无法渲染图表。
• 自定义组件名和引入的Chart类重名，会导致命名冲突。
• cleanData内部的data变量没有声明关键字，属于隐式全局变量，会引发潜在报错。
• 异步请求/处理数据的逻辑没有配合React状态和生命周期钩子执行，数据更新后无法触发组件重渲染。
• 新版本Chart.js需要手动注册用到的图表元素，未注册也会导致图表空白。

修复后的Chart组件代码 #

import React, { useState, useEffect } from "react";
import { Doughnut } from "react-chartjs-2";
// 重命名引入的Chart类避免命名冲突，同时引入需要的图表元素
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from "chart.js";

// 注册Chart.js需要的模块
ChartJS.register(ArcElement, Tooltip, Legend);

// 重命名自定义组件，避免命名冲突
const DoughnutChart = () => {
  // 用state存储图表数据，数据更新可触发重渲染
  const [chartData, setChartData] = useState(null);

  const cleanData = async () => {
    // 后续此处可替换为API请求、数据处理逻辑
    const data = {
      labels: ["A", "B", "C", "D", "E"],
      datasets: [
        {
          data: [120, 340, 560, 230, 100],
          backgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56",
            "#FF6384",
            "#36A2EB",
          ],
          hoverBackgroundColor: [
            "#FF6384",
            "#36A2EB",
            "#FFCE56",
            "#FF6384",
            "#36A2EB",
          ],
        },
      ],
    };
    return data;
  };

  // 组件挂载时执行数据获取逻辑
  useEffect(() => {
    const fetchData = async () => {
      const res = await cleanData();
      setChartData(res);
    };
    fetchData();
  }, []);

  // 数据加载完成前显示加载态，避免传入空值报错
  if (!chartData) return <div>加载中...</div>;

  return (
    <div>
      <Doughnut data={chartData} width={400} height={400} />
    </div>
  );
};

export default DoughnutChart;

对应的Dashboard组件调整 #

import React from "react";
import DoughnutChart from "../Chart/Chart";

const Dashboard = (props) => {
  return(
    <div>
      <DoughnutChart />
    </div>
  )
}

export default Dashboard;

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