使用Chart.js构建折线图时出现读取null的labels属性错误求助

我正在使用Chart.js构建LineChart，数据已按预期从服务器传输完成，且dates和coinValue的拆分也正常，但出现以下错误：

Uncaught TypeError: Cannot read properties of null (reading 'labels')

相关代码如下：

import { Link } from "react-router-dom";
import { Line } from "react-chartjs-2";
import {Chart as chartjs, Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement} from "chart.js";

chartjs.register(
  Title, Tooltip, LineElement, Legend, CategoryScale, LinearScale, PointElement
)

function BitCoin() {
  const [data, setData] = React.useState(null);
  const [dates, setDates] = React.useState(null);
  const [coinValue, setCoinValue] = React.useState(null);
  const [chartData, setChartData] = useState(null);


  React.useEffect(() => {
    fetch("http://localhost:3001/bitcoin")
      .then((res) => res.json())
      .then((data) => {
        const twoDimensionArr = data.message;
        setData(twoDimensionArr);
        setDates(twoDimensionArr.map(item => item[0]));
        setCoinValue(twoDimensionArr.map(item => item[1]));
        setChartData({
          labels: twoDimensionArr.map(item => item[0]),
          datasets: [{
            label: "value of BTC in ILS",
            data: twoDimensionArr.map(item => item[1]),
            backgroundColor: 'gold'
          }]
        })
      })
  }, []);

  return (
    <div style={{textAlign:"center", fontFamily:"Comic Sans MC", fontSize:"100"}}>
      THIS IS THE BitCoin PAGE

      <nav>
        <Link to="/"> Home </Link>
      </nav>

      <nav>
        <Link to="/coins"> Coins </Link>
      </nav>

      <Line
      data = {chartData}
      />

    </div>
  )
}

export default BitCoin;

错误原因 #

组件初始化时chartData的初始值是null，而fetch请求是异步执行的——第一次渲染页面时，请求还未完成，chartData仍为null，此时<Line>组件尝试读取chartData.labels就会触发Cannot read properties of null的错误。

修复方案（二选一即可） #

方案1：给chartData设置合法的初始结构

将chartData的初始值从null改为符合Chart.js数据格式的空对象，确保第一次渲染时<Line>组件能读取到合法的属性：

// 替换原来的初始化代码
const [chartData, setChartData] = React.useState({
  labels: [],
  datasets: []
});

方案2：条件渲染<Line>组件

只有当chartData存在（即请求完成并赋值后）才渲染图表：

// 替换return中的<Line>部分
{chartData && <Line data={chartData} />}

额外注意点 #

代码中const [chartData, setChartData] = useState(null);直接使用了useState，但其他状态用的是React.useState——如果代码没有单独导入useState（比如import { useState } from 'react'），这里会触发另一个错误，建议统一写法：要么都用React.useState，要么提前导入useState。

内容的提问来源于stack exchange，提问作者MR. potato35