有人可以帮我TypeError：无法读取未定义的属性“地图”

Question

I am getting this error

** 这是我收到错误的文件**

import React from "react";
import ChartBar from "./ChartBar";

const Chart = props => {
  const dataPointValues = props.data.map(dataPoint => dataPoint.value);
  const totalMaximum = Math.max(...dataPointValues);

  return (
    <div className="chart">
      {props.data.map(dataPoint => (
        <ChartBar
          key={dataPoint.label}
          value={dataPoint.value}
          maxValue={totalMaximum}
          label={dataPoint.label}
        />
      ))}
    </div>
  );
};

export default Chart;

这是我在上面渲染组件的文件

import React from 'react';
import Chart from "../Chart/Chart";

const ExpensesChart = props => {

    const chartDataPoints = [
        {label: 'Jan', value:0},
        {label: 'Feb', value:0},
        {label: 'Mar', value:0},
        {label: 'Apr', value:0},
        {label: 'May', value:0},
        {label: 'Jun', value:0},
        {label: 'Jul', value:0},
        {label: 'Aug', value:0},
        {label: 'Sep', value:0},
        {label: 'Oct', value:0},
        {label: 'Nov', value:0},
        {label: 'Dec', value:0}
    ];

    for (const expense of props.expenses)
    {
        const expenseMonth = expense.date.getMonth(); //starting at 0 => January => 0
        chartDataPoints[expenseMonth].value += expense.amount;
    }

return (<Chart data={chartDataPoints}/>);
}

export default ExpensesChart;

任何帮助将不胜感激，我已经尝试了一切。这是我正在学习的一门课程，我重复了很多次视频，老师的代码和我的看起来一样。谢谢

Answer 1

我猜你可以通过使用 Chrome Devtool 断点来检查它为什么是 undefined 并查看 Chart 组件的数据道具是否是一个数组并解决它为什么是 undefined 的根本原因。

否则，为了避免这种TypeError，你至少可以用&&表达式来检查props.data是否是这样的数组。 p>

import React from "react";
import ChartBar from "./ChartBar";

const Chart = props => {
  const dataPointValues = Array.isArray(props?.data) && props.data.map(dataPoint => 
    dataPoint.value);
  const totalMaximum = Array.isArray(dataPointValues) && Math.max(...dataPointValues);

  return (
    <div className="chart">
      {Array.isArray(props?.data) && props.data.map(dataPoint => (
        <ChartBar
          key={dataPoint.label}
          value={dataPoint.value}
          maxValue={totalMaximum}
          label={dataPoint.label}
        />
      ))}
    </div>
  );
};

export default Chart;