使用React Native FlatList时遇Element type invalid错误，如何解决？

问题根源 #

你的代码存在一个语法错误：在Abc类组件的顶层直接执行了console.log("RENDER RENDER");语句。类的主体内部只能定义属性或方法，不能直接放置执行语句，这会导致组件无法被正确解析，最终抛出元素类型无效的错误。

修复方案 #

将这行console.log代码移到render方法内部，或者类的构造函数中，修改后的完整代码如下：

import * as React from 'react';
import { View, Text, SafeAreaView, StyleSheet, FlatList } from 'react-native';

const DATA = [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'First Item',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Second Item',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Third Item',
    },
  ];
  
  function Item({ title }) {
    return (
      <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  }

export default class Abc extends React.Component<{}, {}> {
    render(): React.ReactNode {
        console.log("RENDER RENDER"); // 移至render方法内执行
        return (
            <SafeAreaView style={styles.container}>
                <FlatList
                    data={DATA}
                    renderItem={({ item }) => <Item title={item.title} />}
                    keyExtractor={item => item.id}
                />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      marginTop: 10,
    },
    item: {
      backgroundColor: '#f9c2ff',
      padding: 20,
      marginVertical: 8,
      marginHorizontal: 16,
    },
    title: {
      fontSize: 32,
    },
  });

额外排查方向 #

如果修复后仍出现相同错误，可以检查以下内容：

• 确认使用的React Native版本中FlatList是否正常导出（你的导入方式符合标准，旧版本可能存在差异）
• 确保Item组件在FlatList使用前已定义（你的代码中已提前定义，无问题）
• 排查代码中是否存在其他未被发现的语法错误

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