TypeError：无法读取未定义的属性“映射”......即使属性已定义？

Question

我一直在关注 Max Schwarzmueller 关于 Udemy 的 React 课程，到目前为止一切进展顺利。在听他讲课的过程中，我遇到了一个我一辈子都无法解决的错误。

有问题的项目是一个费用跟踪器，错误本身与一个图表有关，该图表衡量给定月份对当年费用的贡献程度。 dataPoints 属性从 ExpensesChart（父组件）传递到 Chart（子组件），用于依次渲染每个 ChartBars（Chart 的子组件）。然后使用 map() 将每个点的值分配给一个数组，以便可以使用 Math.max() 找到最大值，但由于某种原因，尝试加载站点会引发错误：

TypeError：无法读取未定义的属性“地图”
5 | const dataPointValues = props.dataPoints.map(dataPoint => dataPoint.value);

这是所有三个的代码：

ExpensesChart.js：

import Chart from "../Chart/Chart";

function 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(); // 0-indexed
    chartDataPoints[expenseMonth].value += expense.amount;
  }

  return <Chart dataPoints={chartDataPoints} />;
}

export default ExpensesChart;

Chart.js：

import ChartBar from "./ChartBar";
import "./Chart.css";

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

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

export default Chart;

ChartBar.js：

import "./ChartBar.css";

function ChartBar(props) {
  let barFillHeight = "0%";

  if (props.maxValue > 0) {
    barFillHeight = Math.round((props.value / props.maxValue) * 100) + "%";
  }

  return (
    <div className="chart-bar">
      <div className="chart-bar__inner">
        <div
          className="chart-bar__fill"
          style={{ height: barFillHeight }}
        ></div>
      </div>
      <div className="chart-bar__label">{props.label}</div>
    </div>
  );
}

export default ChartBar;

我几乎可以肯定 chartDataPoints（通过它的 props 传递给 Chart 的值）存在，所以我不知道出了什么问题。该站点上的其他一些答案以及其他一些与异步加载组件有关的答案，但我不确定这是否适用于这里，因为其中一些帖子使用了 AJAX。

任何帮助将不胜感激！

编辑：我遇到了更奇怪的行为。我想我可以尝试通过 Chrome 的 DevTools 进行调试，但经过检查，在 Sources 选项卡下的文件树中找不到 ExpensesChart。这是一张图片：

此外，任何放置在 ExpensesChart 文件中任何位置的 console.log() 语句（在函数的开头或结尾，甚至在函数之外）都不会在控制台中注册。发生这种情况是因为错误吗？

我尝试明确指定 dataPointValues 的数据类型，但这仍然无法完全正常工作。完成后页面实际加载，但图表显示不正确。代码现在如下所示：

import ChartBar from "./ChartBar";
import "./Chart.css";

Chart.defaultProps = {
  dataPoints: []
}

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

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

export default Chart;

它看起来像这样：

...也就是说，空白。

Answer 1

检查您的props.dataPoints 是否为undefined。

替换这一行：

const dataPointValues = props.dataPoints.map(dataPoint => dataPoint.value);

用这个：

const dataPointValues = props.dataPoints && props.dataPoints.map(dataPoint => dataPoint.value);

Answer 2

天哪。我想通了。

在 Expenses.js（我没有包含的一个文件，它是 ExpensesChart 的父文件）中，我写了以下行：

import ExpensesChart from "../Chart/Chart";

我改成：

import ExpensesChart from "../Expenses/ExpensesChart";

...而且效果很好。叹息……

Answer 3

在我的例子中，我将文件 ExpensesChart.js 从 dataPoint={chartDataPoints} 更改为 dataPoints={chartDataPoints} 并且它有效。