ReactJS - 超级表达式必须为null或函数,而不是未定义

时间:2017-08-13 11:44:21

标签: javascript html reactjs

我一直在关注udemy的课程,但无论我做什么,都会出现错误:

enter image description here

这是组件代码:

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未定义,所以它会抛出错误。

2 个答案:

答案 0 :(得分:3)

我遇到了同样的问题。该错误是由于反应 - 迷你线和#39; 。通过以下方式降级版本: npm i --save react-sparklines@1.6.0 它现在应该工作。

答案 1 :(得分:1)

进一步检查后,您的Chart组件中出现问题,因为您正试图访问组件中未定义的thisprops对象。

因此,代替data={thisprops.data},它应该是:data={props.data}