FlatList 无法渲染求助：已获取API数据但列表不显示

问题分析 #

你的代码存在几个关键问题导致FlatList不渲染：

• 未触发API请求：仅定义了getCategory函数但没有调用，categories始终处于初始的undefined状态（即便你提到控制台能打印数据，代码里也没有自动触发请求的逻辑）。
• 初始状态错误：useState()未设置初始值，默认是undefined，而FlatList要求data必须是数组类型，undefined会导致组件无法渲染。
• key类型潜在问题：如果item.id是数字类型，直接返回会触发React警告，需要转为字符串。
• 容器高度缺失：外层View没有设置高度，FlatList可能因没有可用空间而无法显示内容。

修复后的代码 #

import { FlatList, Image, StyleSheet, Text, View } from 'react-native'
import GlobalApi from '../Utils/GlobalApi';
import React, { useEffect, useState } from 'react'

const CategoryList = () => {
  // 初始值设为空数组，保证data始终为数组类型
  const [categories, setCategories] = useState([]);

  const getCategory = () => {
    GlobalApi.getCategory().then(resp => {
      console.log(resp.categories);
      // 兜底处理，确保返回值为数组
      setCategories(resp.categories || []);
    }).catch(err => {
      console.error('获取分类失败:', err);
      // 请求失败时也设为空数组，避免FlatList报错
      setCategories([]);
    });
  }

  // 组件挂载时自动调用API
  useEffect(() => {
    getCategory();
  }, []);

  return (
    // 给外层View设置高度，确保FlatList有渲染空间
    <View style={{ height: 100 }}>
      <FlatList
        data={categories}
        horizontal={true}
        // 将id转为字符串，符合React对key的要求
        keyExtractor={item => String(item.id)}
        renderItem={({ item }) => (
          <View style={{ marginHorizontal: 10, alignItems: 'center' }}>
            <Image 
              source={{ uri: item?.icon?.url }} 
              style={{ width: 40, height: 40 }}
              // 图片加载失败时显示占位图
              fallbackSource={{ uri: 'https://via.placeholder.com/40' }}
            />
            <Text style={{ marginTop: 5 }}>{item.id}</Text>
          </View>
        )}      
      />
    </View>
  )
}

export default CategoryList

const styles = StyleSheet.create({})

关键修复点说明 #

• 初始化空数组：useState([])确保data始终为数组类型，FlatList在初始状态下也能正常识别。
• 添加useEffect触发请求：通过useEffect在组件挂载时自动调用API，保证数据能被正确获取并更新状态。
• 处理key类型：String(item.id)将数字id转为字符串，避免React的key类型警告。
• 设置容器高度：给外层View设置固定高度，保证FlatList有足够的渲染空间。
• 异常处理：添加catch块处理API请求失败的情况，同时兜底确保categories始终是数组。

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