使用Expo CLI开发React Native应用遇Element type is invalid错误求解决

错误提示 #

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);

问题原因及修复方案 #

1. FlatList组件拼写错误 #

React Native官方列表组件名称是FlatList（首字母F、第二个L均为大写），你代码中写成了Flatlist（第二个L小写），导致组件未正确导入，值为undefined，直接触发当前错误。

修复代码：

// 修正导入语句，补充Text组件导入
import { FlatList, ActivityIndicator, View, TouchableWithoutFeedback, Text } from 'react-native';

// 修正渲染时的组件名称
<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()}
/>

2. 未导入Text组件 #

你在renderItem中使用了<Text>组件，但未从react-native库中导入该组件，这同样会导致组件为undefined，需补充导入。

修复代码：
在react-native的导入列表中添加Text，如上述代码所示。

3. actionOnRow方法this绑定问题（潜在bug） #

虽然这不是当前错误的直接原因，但点击列表项时会出现this指向异常的问题，无法正常跳转到详情页。可通过两种方式修复：

方式一：构造函数中绑定this

constructor(props){
  super(props);
  this.state ={isLoading: true};
  // 绑定方法的this指向
  this.actionOnRow = this.actionOnRow.bind(this);
}

方式二：使用箭头函数定义方法

// 箭头函数自动绑定当前组件的this
actionOnRow = (item) => {
  this.props.navigation.navigate('Details', {item});
}

内容的提问来源于stack exchange，提问作者Link