React Native初学遇错：使用Flatlist组件时出现组件类型错误

嘿，我一眼就揪出几个导致报错的问题，咱们逐个修复：

• 组件名称拼写错误：React Native官方的列表组件是FlatList（注意最后一个字母L是大写的），你写成了小写的Flatlist，这会让React找不到这个内置组件，直接抛出“got undefined”的错误——这是最核心的问题！

• data属性传值错误：你的state.person本身就是一个数组，不需要再用方括号包裹。你当前的写法data={[this.state.person]}会把整个person数组当成单个元素传入，导致renderItem里的item是整个数组而非单个对象。正确写法是直接传data={this.state.person}。

• renderItem缺少可渲染元素：renderItem必须返回一个有效的React元素，你现在只加了console.log(item)，没有返回任何可显示的内容，这也会影响FlatList的正常渲染。可以返回一个<Text>组件来展示每个名字。

修正后的完整代码 #

import React, { Component } from 'react';
import { FlatList, Text, View } from 'react-native';

export default class List extends Component {
  state = {
    person: [
      { name: 'abhjeet' },
      { name: 'shubham' },
      { name: 'kamal' },
      { name: 'devesh' },
      { name: 'ashu' }
    ]
  }

  render() {
    return (
      <View>
        <FlatList 
          data={this.state.person} 
          renderItem={({ item }) => {
            console.log(item);
            return <Text>{item.name}</Text>;
          }} 
        />
      </View>
    );
  }
}

另外补充下：你用Text组件时没问题，是因为Text的拼写完全正确，React能正确识别这个内置组件；而Flatlist拼写错误导致React找不到对应的组件，所以才会抛出那个类型错误。

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