为啥我得到 Typeerror 超级表达式必须为 null 或函数？

Posted 2023-02-23

【中文标题】为啥我得到 Typeerror 超级表达式必须为 null 或函数？

【英文标题】：Why am I getting Typeerror super expression must either be null or a function?为什么我得到 Typeerror 超级表达式必须为 null 或函数？

【发布时间】：2020-05-31 05:56:30

【问题描述】：

所以我上周刚开始学习 React Native 以尝试学习开发应用程序。我一直在学习 Udemy 课程，在我尝试创建一个新组件之前，它一直进展顺利。我已经重读了 3 次课程，试图找出我的错误，但我似乎看不出代码之间的区别。请原谅我的业余错误，无论它在哪里。主 app.js 文件包含以下内容：

import React from 'react';
import  StyleSheet, Text, View, Platform, Image, ImageBackground  from 'react-native';
import Button from 'native-base';
import Landing from './src/Landing'
import  render  from 'react-dom';

var myBackground = require('./assets/icons/landing.jpg');

export default class App extends React.Component() 
  render() 
  return (
    <View style=styles.container>
      <Landing />
    </View>
  );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    marginTop: Platform.OS === "android" ? 50 : 0
  ,
);

我的组件代码是这样的：

import React from 'react';
import View, Text, Image, StyleSheet from 'react-native';
import Button from 'native-base';

var myBackground = require('../assets/icons/landing.jpg');

class Landing extends React.Component 
    render() 
        return(
            <View>
                <ImageBackground style= styles.imgBackground  source=myBackground>
                    <View style=styles.viewStyle>
                    <Text style=styles.titleStyle>Welcome to PokeSearch</Text>
                    <Button block=true style=styles.buttonStyle onPress=()=>>
                        <Text style=styles.buttonText>Start Searching for Pokemon!</Text>
                    </Button>
                    </View>
                </ImageBackground>
            </View>
        )
    


const styles = StyleSheet.create(
    container: 
      flex: 1,
      marginTop: Platform.OS === "android" ? 50 : 0
    ,
    imgBackground: 
      width: '100%',
      height: '100%',
      flex: 1 
  ,
  viewStyle: 
    flex: 1,
    flexDirection: 'column',
    justifyContent: "center",
    alignItems: "center"
  ,
  titleStyle: 
    fontSize: 30,
    color: 'red',
    alignItems: 'center',
  ,
  buttonStyle: 
    margin: 10
  ,
  buttonText: 
    color: 'red'
  ,
  );


export default Landing;

任何帮助将不胜感激，我似乎找不到哪里出错了...... 这是模拟器中的完整错误： 提前致谢！

【参考方案1】：

将export default class App extends React.Component() 更改为export default class App extends React.Component，类组件中不需要括号。

【讨论】：

感谢您消除了错误，但现在我在命令行中收到此错误：找不到变量：ImageBackground * src\Landing.js:10:12 in render - node_modules\ react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:13042:21 in finishClassComponent .... 但是我没有将 imagebackground 设置为变量，它只是一个图像标签，所以我不确定为什么会这样将被识别为变量...

你还没有在 Landing 组件中导入它。从库中导入它（从 'react-native' 导入 ImageBackground ）

@ShLuBsTeR，这些错误可能并不总是告诉你具体发生了什么，因为 React 库开发人员不容易猜测用户会犯的所有类型的错误。

是的，谢谢你，我现在几乎把它完全修好了。现在显示按钮和文本，只是没有显示背景图像。对不起，我是一个开发人员太久没有实践了，所以我犯了愚蠢的错误。一年半前我被解雇了，然后我遇到了电脑问题，所以我才刚刚开始重新开始开发

尽管我将图像背景设置为 但我认为修复它并没有付出太多努力，其他一切似乎都运行良好，所以我将继续学习本教程，感谢您的帮助！