React报错：Cannot access 'chartjs' before initialization 求助

问题根源 #

1. 初始化useState时非法引用变量：你在useState的初始值里直接调用了chartjs变量，但此时chartjs还未完成声明，JS引擎会直接抛出未初始化的错误。
2. 数据结构不匹配：API返回的原始数据结构和Chart.js要求的labels+datasets结构完全不符，直接把API响应赋值给状态变量会导致图表无法识别数据。
3. 未处理空状态：组件初始化时还没拿到API数据，直接执行chartjs.data.map会触发空指针报错。

修复方案 #

步骤1：修正useState初始值

将状态变量的初始值设为null，避免初始化阶段引用未定义的变量。

步骤2：API请求后转换数据结构

拿到API返回的数据后，手动转换成Chart.js需要的格式：

• 从response.data.data数组中提取年份作为图表的labels
• 提取人口数据作为datasets中的data字段

步骤3：添加加载状态判断

渲染图表前先判断状态变量是否有有效数据，避免空指针错误。

修改后的完整代码 #

App.js

import "./App.css";
import BarChart from "./components/BarChart";
import { useEffect, useState } from "react";
import axios from "axios";

function App() {
  // 初始状态设为null，避免初始化时引用未定义变量
  const [chartData, setChartData] = useState(null);

  const url = "https://datausa.io/api/data?drilldowns=Nation&measures=Population";

  useEffect(() => {
    axios.get(url).then((response) => {
      const apiData = response.data.data;
      // 转换为Chart.js需要的标准结构
      const formattedData = {
        labels: apiData.map(item => item.Year),
        datasets: [
          {
            label: "Population", // 注意是label不是labels，符合Chart.js规范
            data: apiData.map(item => item.Population),
            backgroundColor: "rgba(75, 192, 192, 0.6)" // 可选：自定义柱子颜色
          }
        ]
      };
      setChartData(formattedData);
    });
  }, [url]);

  return (
    <div>
      {/* 有数据时渲染图表，无数据时显示加载提示 */}
      {chartData ? <BarChart chartData={chartData} /> : <div>加载中...</div>}
    </div>
  );
}

export default App;

BarChart.js

import React from "react";
import { Bar } from "react-chartjs-2";
import { Chart as ChartJS } from "chart.js/auto";

const BarChart = ({ chartData }) => {
  return <Bar data={chartData} />;
};

export default BarChart;

额外说明 #

• 修正了datasets中的字段拼写：Chart.js要求的是label而非labels，之前的拼写错误会导致图表不显示标签。
• 新增加载状态提示，优化用户体验。
• 将变量名从chartjs改为chartData，更贴合语义，避免和库名混淆。

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