有人可以帮我 TypeError: Cannot read property 'map' of undefined

Question

I am getting this error

** This is the file where I am getting the 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;

This is is the file where I render the component above

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;

Any help will be appreciate, I have tried everything. This is a course that I am taking I have repeated the video many times and the teacher code and mine look the same. Thanks

Answer 1

I guess what you can do to check why it is undefined is by using the Chrome Devtool breakpoint and see Chart component's data props is an array or not and solve the root cause why it is undefined .

Otherwise, to avoid this kind of TypeError , the least you can do is to put && expression to check if props.data is an array like this.

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;