我正在使用Recharts庫構建圖表庫。React - TypeError:無法讀取未定義的屬性「地圖」
這些都是我在
數據燈具的工作文件被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>
);
}
};
導入模塊爲什麼會引發此錯誤類型錯誤:無法讀取屬性「地圖」的不確定?什麼是未定義的?
'this.props.charts.map' - >這會拋出錯誤,因此'this.props.charts'是'undefined' – vlaz
那我該如何定義它呢?「圖表」實際上是在我的商店中定義的 – Koala7
我看不到您導入ChartsGrid的位置..我期望您 –
Aus