Question

我正在制作一个小应用程序，并将其与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%'
  }
});

Answer 1

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

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

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

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

4）default export中没有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。

Answer 2

尝试使用钩子...

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

const Stack = createStackNavigator();

function ShowCustomerOrders(props) {
  return (
    <TouchableOpacity
      onPress={() => props.navigation.navigate('Map', { order: props.order })}>
      <Text>{props.order.naam}</Text>
      <Text>{props.order.adres}</Text>
    </TouchableOpacity>
  );
}

function OrdersScreen(props) {
  const [orders, setOrders] = useState([]);

  useEffect(() => {
    getOrders();
  }, []);

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

    setOrders(data.orders);
  };

  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={orders}
        renderItem={({ item }) => (
          <ShowCustomerOrders navigation={props.navigation} order={item} />
        )}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Orders" component={OrdersScreen} />
        <Stack.Screen name="Map" component={MapScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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

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

2 个答案: