React中CanvasJSChart渲染JSON数据报错：无法读取undefined的属性'0'

嘿，我来帮你搞定这个渲染崩溃的问题！

问题根源 #

你遇到的TypeError: Cannot read property '0' of undefined，本质是组件渲染时this.props.crypto.archived_data还没被初始化——大概率是你的加密货币数据是异步获取的（比如从API请求），组件第一次渲染时archived_data还处于undefined状态，这时候直接访问[0]就会触发报错。而quantity能正常显示，是因为它要么有默认值，要么在初始props里就被定义了。

解决方法 #

这里有几个实用的方案，你可以根据自己的代码风格选择：

1. 用可选链操作符（最简洁）

ES2020引入的可选链?.可以安全地访问嵌套属性，只要中间某一层是undefined/null，就会返回undefined而不是报错。把你的访问方式改成这样：

// 安全获取第一个月的sold数据
this.props.crypto.archived_data?.[0]?.sold
// 安全获取第一个月的bought数据
this.props.crypto.archived_data?.[0]?.bought

2. 条件渲染+兜底判断

在渲染图表相关内容前，先判断archived_data是否存在且有数据：

render() {
  const { crypto } = this.props;
  // 先确认archived_data存在且不为空数组
  if (!crypto.archived_data || crypto.archived_data.length === 0) {
    return <div>Loading data...</div>; // 加载提示
  }

  // 确认数据存在后再正常访问
  const firstMonthSold = crypto.archived_data[0].sold;
  const firstMonthBought = crypto.archived_data[0].bought;

  return (
    <CanvasJSChart
      options={{
        // 你的图表配置，使用firstMonthSold等数据
      }}
    />
  );
}

3. 设置组件默认Props

给CryptoChart组件设置默认props，确保archived_data默认是一个空数组，从根源避免undefined：

CryptoChart.defaultProps = {
  crypto: {
    quantity: 0,
    archived_data: [] // 默认空数组，不会出现undefined
  }
};

示例代码整合 #

给你一个完整的修改示例，结合可选链和默认props：

import React from 'react';
import CanvasJSChart from 'canvasjs-react-charts';

class CryptoChart extends React.Component {
  render() {
    const { crypto } = this.props;
    // 用可选链安全处理每一层数据
    const chartData = crypto.archived_data?.map(item => ({
      label: item.name,
      sold: item.sold,
      bought: item.bought
    })) || [];

    return (
      <CanvasJSChart
        options={{
          title: { text: `${crypto.name} Monthly Data` },
          data: [
            {
              type: 'column',
              name: 'Sold',
              dataPoints: chartData.map(d => ({ label: d.label, y: d.sold }))
            },
            {
              type: 'column',
              name: 'Bought',
              dataPoints: chartData.map(d => ({ label: d.label, y: d.bought }))
            }
          ]
        }}
      />
    );
  }
}

// 设置默认props，防止未定义的情况
CryptoChart.defaultProps = {
  crypto: {
    id: 0,
    name: 'Unknown Crypto',
    quantity: 0,
    price: 0,
    old_price: 0,
    info: '',
    archived_data: []
  }
};

export default CryptoChart;

这样修改后，不管数据是同步还是异步加载，组件都能安全渲染，不会再因为嵌套属性未定义而崩溃啦。

内容的提问来源于stack exchange，提问作者R-b-n