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

Question

我收到此错误

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

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组件的 data props 是否为数组并解决它undefined的根本原因。

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

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;