React Native中FlatList获取数据却无法渲染内容问题排查

安全阿岳

2026-6-27

问题分析与解决

核心问题1：Props接收方式错误

你的Categories组件参数直接写了categoryList，但React组件的参数是整个props对象。从日志能看到，实际传入的是{categoryList: [...]}这样的结构，你直接把这个对象传给了FlatList的data属性，FlatList无法遍历对象，自然渲染不出内容。

核心问题2：FlatList缺少keyExtractor（可选但必要）

FlatList需要通过keyExtractor指定每个列表项的唯一标识，避免渲染时出现性能问题或异常，虽然这不是当前不渲染的直接原因，但属于规范写法。

修正后的代码

export default function Categories({ categoryList }) { // 解构props，直接获取categoryList数组
  console.log("============>>>>>>", categoryList);
  return (
    <View className="mt-3">
      <Text className="font-bold text-[20px]">Categories</Text>
      <FlatList
        data={categoryList} // 现在传入的是正确的数组
        numColumns={4}
        keyExtractor={(item, index) => item.name || index.toString()} // 添加keyExtractor，用name或索引作为唯一key
        renderItem={({ item, index }) => (
          <View className="flex-1 items-center justify-center  p-2 border-[1px] border-gray-300 m-1 h-[80px] rounded-lg">
            <Image source={{ uri: item.icon }} className="w-[40px] h-[40px]" />
            <Text className="text-[12px]">{item.name}</Text>
          </View>
        )}
      />
    </View>
  );
}