【问题标题】:ReactJS - Super expression must either be null or a function, not undefinedReactJS - 超级表达式必须为空或函数,而不是未定义
【发布时间】:2018-01-21 10:23:54
【问题描述】:

我一直在学习有关 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 是未定义的,因此会引发错误。

【问题讨论】:

标签: javascript html reactjs


【解决方案1】:

我遇到了同样的问题。该错误是由于 'react-sparklines' 造成的。通过以下方式降级版本:

npm i --save react-sparklines@1.6.0.

【讨论】:

    【解决方案2】:

    经过进一步检查,问题似乎出在您的 Chart 组件中,因为您正尝试访问组件中未定义的 thisprops 对象。

    所以,应该是:data={props.data},而不是 data={thisprops.data}

    【讨论】:

    • 我的反应版本是@0.14.9,它运行一切都很完美,直到我添加了图表组件,至于代码,这并不重要,因为当我注释掉import Chart from 'url'时它没有不要抛出错误。所以我只展示破坏应用程序的部分。
    • 我编辑了我的答案。尝试使用名为 default 的导出导出您的图表,而不是仅导出一个函数。另外,为什么不发布整个 Chart 组件代码,因为它是导致问题的代码?
    • 我刚刚在问题中添加了文件的其余部分
    • 这个怎么样 - data={thisprops.data}?显然应该是data={props.data}。我更新了我的答案作为这个问题的解决方案。
    • 那只是因为我试图把它变成一个基于类的组件然后它什么也没做,所以这是一个不相关的问题。我仍然有同样的问题。谢谢你的尝试,但我认为这个问题没有解决办法。我很快就会关闭它
    猜你喜欢
    • 2018-02-19
    • 2017-07-11
    • 1970-01-01
    • 2018-02-01
    • 2016-10-07
    • 1970-01-01
    • 1970-01-01
    • 2023-04-10
    • 1970-01-01
    相关资源
    最近更新 更多