问题

I'm trying to do a React Native app using Expo cli. However when I'm testing it I get error. What should I do to solve the problem?

> Error: Element type is invalid: expected a string (for built-in
> components) or a class/function (for composite components) but got:
> undefined. You likely forgot to export your component from the file
> it's defined in, or you might have mixed up default and named imports.
> Check the render method of FetchExample.

import React, {Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Flatlist, ActivityIndicator, View, TouchableWithoutFeedback } from 'react-native';
import styles from './styles'
import Content from './Components/content';
import ContentDonate from './Components/contentdonate';
import Details from './Components/details';
import Header from './Components/header';
import Footer from './Components/footer';

class FetchExample extends React.Component {
  static navigationOptions = {
    title: 'Database',
  };

  constructor(props){
    super(props);
    this.state ={isLoading: true}
  }

  actionOnRow(item) {
    this.props.navigation.navigate('Details', {item});
  }

  componentDidMount(){
    return fetch('https://mocki.io/v1/01994c7b-9eb6-4fe4-b399-1bc5992d1a10')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson,
      },
      );
    })
    .catch((error) =>{
      console.error(error);
    });
  }

  render(){
    if(this state.isLoading){
      return(
        <View>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={styles.background}>
        <View style={styles.container}>
          <Flatlist
          data ={this.state.dataSource}
          renderItem={({item}) =>
          <TouchableWithoutFeedback onPress ={ () => this.actionOnRow(item)}>
            <Text style = {styles.listTextStyle}>{item.Name}</Text>
          </TouchableWithoutFeedback>
          }
          keyExtractor={item => item.Id.toString()}
          />
        </View>
      </View>
    );
  } 
}

//NAVIGATION
class HomePage extends Component {
  render(){
    return (
      <View style = {styles.container}>
        <Header/>
        <Content/>
        <Footer/>
      </View>
  );
  }
}

class DonatePage extends Component {
  render(){
    return (
      <View style = {styles.container}>
        <Header/>
        <ContentDonate/>
        <Footer/>
      </View>
  );
  }
}

const AppNavigator = createStackNavigator(
  {
    Home: HomePage,
    Donate: DonatePage,
    Details: Details,
    Database: FetchExample
  },
  {
    initialRouteName: 'Home',
  }
);

export default createAppContainer(AppNavigator);

import React, {Component} from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { Flatlist, ActivityIndicator, View, TouchableWithoutFeedback } from 'react-native';
import styles from './styles'
import Content from './Components/content'
import ContentDonate from './Components/contentdonate';
import Details from './Components/details';
import Header from './Components/header';
import Footer from './Components/footer'
class FetchExample extends React.Component {
static navigationOptions = {
title: 'Database',
};
constructor(props){
super(props);
this.state ={isLoading: true}
}
actionOnRow(item) {
this.props.navigation.navigate('Details', {item});
}
componentDidMount(){
return fetch('https://mocki.io/v1/01994c7b-9eb6-4fe4-b399-1bc5992d1a10')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson,
},
);
})
.catch((error) =>{
console.error(error);
});
}
render(){
if(this.state.isLoading){
return(
<View>
<ActivityIndicator/>
</View>
)
}
return(
<View style={styles.background}>
<View style={styles.container}>
<Flatlist
data ={this.state.dataSource}
renderItem={({item}) =>
<TouchableWithoutFeedback onPress ={ () => this.actionOnRow(item)}>
<Text style = {styles.listTextStyle}>{item.Name}</Text>
</TouchableWithoutFeedback>
}
keyExtractor={item => item.Id.toString()}
/>
</View>
</View>
);
} 
}
//NAVIGATION
class HomePage extends Component {
render(){
return (
<View style = {styles.container}>
<Header/>
<Content/>
<Footer/>
</View>
);
}
}
class DonatePage extends Component {
render(){
return (
<View style = {styles.container}>
<Header/>
<ContentDonate/>
<Footer/>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Home: HomePage,
Donate: DonatePage,
Details: Details,
Database: FetchExample
},
{
initialRouteName: 'Home',
}
);
export default createAppContainer(AppNavigator);

答案1

得分: 1

• 语法错误：Flatlist，更改为 FlatList。
• Id 字段在 keyExtractor 中找不到，请将 keyExtractor={(item) => item.Id.toString()} 更改为 keyExtractor={(item) => item._id}（_id 已经是一个字符串）。