[英]React - TypeError: Cannot read property 'map' of undefined
我正在使用Recharts库构建Charts Gallery。
这些是我正在处理的文件
数据夹具是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:无法读取未定义的属性“ map”? 实际未定义的是什么?
看起来您在使用charts
数组之前尚未导入Charts.js文件。
您可以导入Charts.js文件,并在其中使用ChartsGrid
组件,并通过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
是直接导入文件中的,而不是作为prop传递给组件的(如第一种解决方案一样)。
使用react dev工具来验证this.props.charts
是否作为数组进入。
如果您想要更好的答案,请包括将charts
传递到ChartsGrid
的组件代码
我认为您需要调用“ ChartsGrid”标签,并在其中传递一个名为“ charts”的属性。 喜欢:
<ChartsGrid charts={}...>
我找不到您在哪里使用过“ ChartsGrid”标签。
将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>
)
}
};
您缺少父组件
Parent.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}/>)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.