问无法在初始化响应错误之前访问

EN

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

function App() {
  const [chartjs, setChartjs] = useState({
    labels: chartjs.data.map((item) => item.Year),
    datasets: [
      {
        labels: "Population",
        data: chartjs.data.map((item) => item.Population),
      },
    ],
  });

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

  useEffect(() => {
    axios.get(url).then((response) => {
      setChartjs(response.data);
    });
  }, [url]);

  if (chartjs) {
    chartjs.data.map((item) => {
      console.log(item.Year);
    });
  }

  // const [userData, setUserData] = useState({
  //   labels: chartjs.data.map((item) => item.Year),
  //   datasets: [
  //     {
  //       labels: "Population",
  //       data: chartjs.data.map((item) => item.Population),
  //     },
  //   ],
  // });

  return (
    <div>
      <BarChart chartData={chartjs} />
    </div>
  );
}

export default App;

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;