未捕获的类型错误：无法读取 null 的属性（读取“标签”）答案

【问题标题】：Uncaught TypeError: Cannot read properties of null (reading 'labels')未捕获的类型错误：无法读取 null 的属性（读取“标签”）
【发布时间】：2022-07-22 23:15:35
【问题描述】：

我正在尝试使用 chartjs 构建 LineChart，但我遇到了一些我无法分辨来源的错误，数据是根据需要从服务器传输的，并且（根据日期和 coinValue）分开就好了。知道是什么问题吗？

以下是错误：

这是我的代码：

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;

【问题讨论】：

标签： reactjs chart.js

【解决方案1】：

这是因为您将 null 传递给 Line 组件。

您需要以空状态初始化数据或有条件地渲染线条。

初始状态：

const [chartData, setChartData] = useState({
    labels: [],
    datasets: [{
        data: []
    }]
});

有条件地渲染：

{chartData !== null && <Line data={chartData}/>}

【讨论】：

【解决方案2】：

不熟悉该图表库，但我猜测它在从 API 调用返回异步数据之前就出错了。我会尝试创建有效的未初始化数据以在初始渲染时提供给 Line 组件，或者只是阻止图表加载，直到数据返回。您可以通过以下方式检查这是否是您的问题：

{chartData && <Line
      data = {chartData}
      />
}

【讨论】：