使用Chart.js和react-chartjs-2时，调用函数填充数据抛出TypeError错误

核心错误原因 #

1. 传递的是函数引用而非数据对象：你当前给 <Chart> 的 data 属性传的是 this.getData（函数本身），但组件需要的是函数执行后返回的数据对象，而非函数引用。
2. this 指向异常：getData 是普通函数，直接调用时 this 不会绑定到组件实例，导致 this.props.data 无法正确获取，最终返回的数据结构不完整。

分步解决方案 #

1. 修正数据传递方式 #

将组件调用代码改为执行函数并传递返回结果：

<Chart type="line" data={this.getData()} />

2. 修复 this 绑定问题 #

以下三种方式任选其一：

方式一：构造函数中绑定 this

class YourChartComponent extends React.Component {
  constructor(props) {
    super(props);
    // 绑定this到组件实例
    this.getData = this.getData.bind(this);
  }

  getData() {
    const data = this.props.data;
    // 处理dates和sales的逻辑
    const dates = data.map(item => item.date);
    const sales = data.map(item => item.sales);
    
    return {
      labels: dates,
      datasets: [{ label: "Some Label", data: sales}]
    }
  }

  render() {
    return <Chart type="line" data={this.getData()} />;
  }
}

方式二：将 getData 改为箭头函数

箭头函数会自动绑定当前组件的 this：

class YourChartComponent extends React.Component {
  getData = () => {
    const data = this.props.data;
    const dates = data.map(item => item.date);
    const sales = data.map(item => item.sales);
    
    return {
      labels: dates,
      datasets: [{ label: "Some Label", data: sales}]
    }
  }

  render() {
    return <Chart type="line" data={this.getData()} />;
  }
}

方式三（不推荐，性能略差）：调用时用箭头函数包裹

<Chart type="line" data={() => this.getData()} />

3. 检查数据结构语法 #

确保 getData 返回的对象语法正确，比如 labels 和 datasets 之间需要加逗号：

return {
  labels: dates, // 此处逗号不可少
  datasets: [{ label: "Some Label", data: sales}]
}

验证逻辑 #

修改后，this.getData() 会返回和你硬编码完全一致的数据结构，<Chart> 组件能正确识别并渲染图表，TypeError 错误会消失。

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