Question

我一直在关注 Max Schwarzmueller 在 Udemy 上的 React 课程，到目前为止一切都进展顺利。在听他讲课的过程中，我遇到了一个我一生都无法弄清楚的错误。

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

<块引用>

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

这是所有三个的代码：

费用图表.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";

...它工作得很好。叹息...

类型错误：无法读取未定义的属性“地图”...即使定义了属性？

2 个答案: