我一直在关注udemy的课程,但无论我做什么,都会出现错误:
这是组件代码:
import React from 'react';
import { Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../components/chart';
class WeatherList extends Component {
constructor(props) {
super(props);
}
renderWeather(cityData) {
...
}
render() {
return (
...
);
}
}
function mapStateToProps(state) {
return {
weather: state.weather
};
}
export default connect(mapStateToProps)(WeatherList);
这是我正在导入的图表组件:
import React from 'react';
import { Sparklines, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
import _ from 'lodash';
function average(data) {
return _.round(_.sum(data) / data.length);
}
const Chart = (props) => {
return (
<div>
<Sparklines width={80} height={80} data={thisprops.data}>
<SparklinesLine color={props.color} />
<SparklinesReferenceLine type="avg" />
</Sparklines>
<div>
{ average(props.data) } { props.units }
</div>
</div>
);
};
export default Chart;
但显然React.Component未定义,所以它会抛出错误。
答案 0 :(得分:3)
我遇到了同样的问题。该错误是由于反应 - 迷你线和#39; 。通过以下方式降级版本: npm i --save react-sparklines@1.6.0 它现在应该工作。
答案 1 :(得分:1)
进一步检查后,您的Chart
组件中出现问题,因为您正试图访问组件中未定义的thisprops
对象。
因此,代替data={thisprops.data}
,它应该是:data={props.data}
。