React Native运行报错：RestApi组件render方法提示元素类型无效如何解决

报错原因 #

你遇到的报错核心是组件拼写错误：React Native 官方提供的列表组件是驼峰命名的 FlatList（第二个字母L大写），你在RestApi.js中导入和使用时都写成了小写l的Flatlist，导致导入的组件值为undefined，渲染时触发类型校验错误。

修复步骤 #

1. 修改RestApi.js顶部的导入语句，修正FlatList的拼写：

// 把原来的Flatlist改成FlatList
import { Button, FlatList, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';

2. 修改RestApi组件render方法里的组件调用，修正标签拼写：

// 把原来的<Flatlist />改成<FlatList />
<FlatList
    data={items}
    keyExtractor={(item, index) => `${item.id}-${index}`}
    renderItem={({item})=>{
        // 原有渲染逻辑保持不变
    }}
/>

同类报错通用排查方法 #

之后再遇到Element type is invalid报错时，可以按以下顺序排查：

• 检查所有用到的组件（内置组件、自定义组件）的拼写和大小写，React对大小写敏感
• 检查自定义组件是否正确导出，导入时有没有混淆默认导出和命名导出（比如组件是默认导出，却用了大括号导入，反之亦然）
• 检查是否存在循环导入的问题

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