React - TypeError：无法读取未定义的属性“地图”答案

【问题标题】：React - TypeError: Cannot read property 'map' of undefinedReact - TypeError：无法读取未定义的属性“地图”
【发布时间】：2017-03-26 19:16:47
【问题描述】：

我正在使用 Recharts 库构建图表库。

这些是我正在处理的文件

数据夹具是 charts.js

const charts = [
  {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
  {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
  {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
  {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
  {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
  {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
  {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];

export default charts;

数据与其他数据一起正确导入我的商店

然后我有我的 ChartsGrid.js 错误来自哪里

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

export default class ChartsGrid extends React.Component{
  render() {
    return (
      <div className="grid">
        {this.props.charts.map((chart, i) => <Chart {...this.props} key={i} i={i} chart={chart} />)}
      </div>
    )
  }
};

这里是我的图表组件从 recharts 库中导入模块

import React from 'react';
import { Link } from 'react-router';
import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, ReferenceLine,
  ReferenceDot, Tooltip, CartesianGrid, Legend, Brush } from 'recharts';

export default class Chart extends React.Component {
  render () {
    const { chart, i} = this.props;
    return (
        <LineChart width={600} height={300} data={charts}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}>
       <XAxis dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
       <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    );
  }
};

为什么会抛出这个错误 TypeError: Cannot read property 'map' of undefined ？什么实际上是未定义的？

【问题讨论】：

this.props.charts.map -> 这会引发错误，因此 this.props.charts 是 undefined
那我该如何定义呢？ “图表”实际上是在我的商店中定义的
我看不到您在哪里导入 ChartsGrid.. 我希望您
另外，ChartsGrid 是你的父组件，它有父组件吗？父母应该将“图表”作为属性传递给它

标签： javascript reactjs ecmascript-6 es6-map

【解决方案1】：

在使用charts 数组之前，您似乎没有导入 charts.js 文件。

您可以导入使用ChartsGrid 组件的charts.js 文件并将charts 作为道具传递：

import charts from './charts'
...
<ChartsGrid charts={charts} />

或者，您可以直接在 ChartsGrid.js 中使用 charts 对象，而不是 this.props。

import charts from './charts'

export default class ChartsGrid extends React.Component{
  render() {
    return (
      <div className="grid">
        {charts.map((chart, i) => 
          <Chart {...this.props} key={i} i={i} chart={chart} />)}
      </div>
    )
  }
}

注意charts.map 而不是this.props.charts.map，因为charts 是直接导入到文件中，而不是作为道具传递给组件（如在第一种解决方案中）。

【讨论】：

【解决方案2】：

使用react dev tools 验证this.props.charts 是否作为数组传入。

如果您想要更好的答案，请包含将charts 传递给ChartsGrid 的组件代码

【讨论】：

【解决方案3】：

我认为您需要调用“ChartsGrid”标签并在其中传递一个名为“charts”的属性。喜欢：

<ChartsGrid charts={}...>

我无法找到您在哪里使用过“ChartsGrid”标签。

【讨论】：

【解决方案4】：

将 ChartsGrid.js 更改为

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

export default class ChartsGrid extends React.Component{
  render() {
   if(this.props.charts){
     return (
       <div className="grid">
         {this.props.charts.map((chart, i) => <Chart {...this.props} key={i} i={i} chart={chart} />)}
       </div>
      )
    }
    else return(
       <div className="grid"></div>
    )
  }
};

【讨论】：

【解决方案5】：

你缺少父组件

父.js

import ChartsGrid from './ChartsGrid';

const charts = [
  {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
  {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
  {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
];

class ParentComponent extends React.Component{
    render(){
        return(<ChartsGrid charts={charts}/>)
    }
}

【讨论】：