ReactJS 给出错误 Uncaught TypeError: Super expression must be null or a function, not undefined

IT技术 reactjs ecmascript-6
2021-04-16 00:02:38

我正在使用 ReactJS。

当我运行浏览器下面的代码时,它说:

未捕获的类型错误:超级表达式必须为空或函数,而不是未定义

任何关于错误的提示都将不胜感激。

首先是用于编译代码的行:

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

和代码:

var React = require('react');

class HelloMessage extends React.Component {
  render() {
    return <div>Hello </div>;
  }
}

更新:在这个问题上在地狱火中燃烧了三天后,我发现我没有使用最新版本的 react。

全局安装:

sudo npm install -g react@0.13.2

本地安装:

npm install react@0.13.2

确保浏览器也使用正确的版本:

<script type="text/javascript" src="react-0.13.2.js"></script>

希望这能挽救别人三天宝贵的生命。

6个回答

类名

首先,如果您确定您是从正确命名的类(例如React.Component,而不是 React.component 或 React.createComponent )扩展,您可能需要升级您的 React 版本。有关要扩展的类的更多信息,请参阅下面的答案。

升级react

React 从 0.13.0 版本开始只支持 ES6 风格的类(请参阅他们的官方博客文章关于支持介绍在这里

在此之前,使用时:

class HelloMessage extends React.Component

您试图使用 ES6 关键字 ( extends) 从未使用 ES6 定义的类进行子类化class这可能就是您遇到super定义等奇怪行为的原因

所以,是的,TL;DR - 更新到 React v0.13.x。

循环依赖

如果您有循环导入结构,也会发生这种情况。一个module导入另一个module,反之亦然。在这种情况下,您只需要重构您的代码以避免它。更多信息

仅供参考。尽管在 ReactJS 16.x 上,我最近还是遇到了同样的错误。原来我在这一行有一个错字:class App extends React.Component () {...}- 应该更正为class App extends React.Component {...} (最后没有()
2021-05-25 00:02:38
大写“C”组件!#面掌
2021-05-26 00:02:38
这对我来说是一个循环导入结构。感谢您为我节省了大量的调试时间!
2021-05-28 00:02:38
对于其他有此问题但更新 React 的人来说,这不是解决办法——向下滚动到其他答案,这可能是一个简单的错字。在我的情况下,它是一个使用React.component而不是的类定义React.Component
2021-06-04 00:02:38
仅供参考,旧方式类也可以使用extends. 试试这个 var x = function(){}; class y extends x {}
2021-06-07 00:02:38

这意味着你想要子类化一些东西,它应该是Class,但是是undefined原因可能是:

  • 输入错误Class extends ...,所以你扩展了未定义的变量
  • 输入错误import ... from,所以你undefined从module导入
  • 引用的module不包含值,您想要导入(例如过时的module - React 的情况),因此您导入不存在的值 ( undefined)
  • 引用moduleexport ...语句中的错字,因此它导出未定义的变量
  • 引用的module缺少export语句,所以它只导出undefined
在我的情况下,这是一个没有正确导入的自写类。我是通过import {Foo} from 'bar'而不是import Foo from 'bar'. 因此赞成。
2021-05-25 00:02:38
也不要这样做:class Thing extends React.Component() {--我必须删除()
2021-05-31 00:02:38
在我的情况下,此错误是由于我在组件渲染函数中导入的内容(我想扩展到子类的类)意外创建了循环引用造成的。当我尝试执行/渲染子类时,因为 superClass 尚未创建但它未定义。
2021-05-31 00:02:38
^ 也是由我的循环引用引起的。
2021-06-04 00:02:38
就我而言,它是 React.Component 中 Component 的小写。
2021-06-18 00:02:38

它也可能是由拼写错误引起的,所以不是Component大写的 C,而是component小写的 c,例如:

React.component //wrong.
React.Component //correct.

注意: 这个错误的根源可能是因为有React并且我们自动认为接下来应该是一个以小写字母开头的react方法或属性,但实际上它是另一个应该以大写字母开头的Component) .

嗯,奇怪的是这个错误在 webpack 构建步骤中没有被发现,但它会在运行时出现。
2021-06-03 00:02:38

就我而言,使用 react-native,错误是我有

import React, {
  AppRegistry,
  Component,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

代替

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  AsyncStorage
} from 'react-native';
这在我的情况下有效!react-native 站点中提供的文档有这个错误示例:)
2021-05-25 00:02:38

当您有循环依赖时,我已经看到了这个错误。

class A extends B {}
class B extends C {}
class C extends A {}