如何解决：TypeError：超级表达式必须为null或函数

Posted 2023-01-12

我正在制作一个小应用程序，并将其与API连接以检索一些信息并显示它。我已经在类中看到了一种解决方法，并且想尝试一下，但是它始终出现以下错误：“ TypeError：超级表达式必须为null或函数”。

我确实在App.js中制作了页面，但不确定是否会出现问题，因为我不确定在启动应用程序时如何加载组件/屏幕。我将export default function App()更改为class App extends React.component，以便能够使用一种状态来保存来自api的数据。

我已经尝试将export class ShowCustomerOrders extends React.Component更改为export class ShowCustomerOrders extends Component。但是结果没有改变。

import React,  Component  from 'react';
import  StyleSheet, Text, View, Image  from 'react-native';
import MapScreen from './components/MapScreen';
import  createStackNavigator  from '@react-navigation/stack'; 
import  FlatList, TouchableOpacity  from 'react-native-gesture-handler';

const Stack = createStackNavigator();

class App extends React.component 
  constructor()
    super();
    this.state = 
      orders: []
    ;
  

  render()
    getOrders();
  return (
      <View style=styles.container>
          <Image style=styles.Map source=
              uri: 'https://open.mapquestapi.com/staticmap/v5/map?center=eindhoven,5611DE,kerkstraat+7&locations=eindhoven,5611DE,kerkstraat+7|marker-md-FF0000-M&size=@2x&key=lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24'
          />
          <FlatList data=this.state.orders
          renderItem=( item ) => <ShowCustomerOrders navigation=this.props.navigation order=item/>/>
      </View>
    );
  


function Map()
  return(
    <Stack.Navigator>
      <Stack.Screen name="Map" component=MapScreen/>
    </Stack.Navigator>
  );


getOrders = async() =>
  const response = 
    await fetch('https://api.summa.1ku.nl/mad/oefenexamen/');
  const data = await response.json();

  this.setState(
      orders: data.orders
  );


export class ShowCustomerOrders extends React.Component
  render()
    return(
      <TouchableOpacity onPress=() => this.props.Navigation.navigate('Map', order:this.props.order)>
        <Text> this.props.order.naam </Text>
        <Text> this.props.order.adres </Text>
      </TouchableOpacity>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  ,
  Map: 
    width: '80%',
    height: '40%',
    bottom: '20%'
  
);

答案

我注意到您的代码中有几个错误。

1）您必须将props传递给constructor。

2）在此class方法中，您需要使用this引用调用一个函数。

3）在ShowCustomerOrders组件中，必须使用道具写承包商才能使用props。

4）default export中没有[C0

这是我编辑的代码。您可以检查它是否有效。

App.js

我建议您使用import React, Component from 'react'; import StyleSheet, Text, View, Image from 'react-native'; import MapScreen from './components/MapScreen'; import createStackNavigator from '@react-navigation/stack'; import FlatList, TouchableOpacity from 'react-native-gesture-handler'; const Stack = createStackNavigator(); export default class App extends React.component constructor(props) super(props); this.state = orders: [] ; getOrders = async() => const response = await fetch('https://api.summa.1ku.nl/mad/oefenexamen/'); const data = await response.json(); this.setState( orders: data.orders ); render() this.getOrders(); return ( <View style=styles.container> <Image style=styles.Map source= uri: 'https://open.mapquestapi.com/staticmap/v5/map?center=eindhoven,5611DE,kerkstraat+7&locations=eindhoven,5611DE,kerkstraat+7|marker-md-FF0000-M&size=@2x&key=lYrP4vF3Uk5zgTiGGuEzQGwGIVDGuy24' /> <FlatList data=this.state.orders renderItem=( item ) => <ShowCustomerOrders navigation=this.props.navigation order=item/>/> </View> ); function Map() return( <Stack.Navigator> <Stack.Screen name="Map" component=MapScreen/> </Stack.Navigator> ); export class ShowCustomerOrders extends React.Component constructor(props) super(props); render() return( <TouchableOpacity onPress=() => this.props.Navigation.navigate('Map', order:this.props.order)> <Text> this.props.order.naam </Text> <Text> this.props.order.adres </Text> </TouchableOpacity> ); const styles = StyleSheet.create( container: flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', , Map: width: '80%', height: '40%', bottom: '20%' ); （使用hooks而不是function），因为它有很多优点。同样使用该方法，您可以毫无问题地使用class。

另一答案

尝试带钩...

states