React Native：FlatList传递对象至renderItem后组件无法渲染的原因

你遇到的组件无法渲染内容的问题，主要有以下几个原因及对应解决方法：

1. FlatList 的 data 属性类型不匹配 #

FlatList 要求 data 必须是数组类型，但你存在 state.details 里的是一个对象（API返回的结构是对象而非数组）。FlatList 无法遍历对象，因此根本不会触发 renderItem 回调。

解决方法：
将对象转换为数组后再传给 FlatList，比如提取对象的键值对数组：

<FlatList
    data={Object.entries(state.details)} // 转为[key, value]格式的数组
    renderItem={({item}) => <Details item={item} />}
    keyExtractor={(item) => item[0]} // 给每个item设置唯一key
></FlatList>

2. renderItem 未返回组件 #

你的 renderItem 回调里仅写了 <Details item={item} />;，但没有通过 return 返回该组件，相当于没有输出任何内容。

解决方法：
在回调中返回组件，可直接用表达式简化写法：

renderItem={({item}) => <Details item={item} />}

3. Details 组件的 map 函数未返回元素 #

Details 组件中 Object.values(item).map(...) 的回调里仅写了 <Text> 标签，但没有返回它，map 最终会生成一个全是 undefined 的数组，自然无法渲染内容。

解决方法：
在 map 回调中返回 Text 元素，同时给每个元素添加唯一 key：

export default Details = ({item}) => {
  return item
    ? Object.values(item).map((value, index) => {
        return <Text key={index}>{typeof value === 'object' ? JSON.stringify(value) : value}</Text>;
      })
    : null;
};

4. Details 组件的取值逻辑错误 #

原代码中尝试访问 value.data1?.username，但 Object.values(item) 得到的是 [true, {username: "user1", ...}, {location: "new york", ...}]，其中第一个值是布尔值 true，后两个是 data1、data2 的对象本身，不存在 value.data1 这个属性，因此取值结果为 undefined，即使渲染也看不到内容。

解决方法：
根据值的类型针对性渲染内容，比如对象类型展示其内部属性，基本类型直接展示：

export default Details = ({item}) => {
  if (!item) return null;
  
  return Object.values(item).map((value, index) => {
    let content;
    if (typeof value === 'object' && value !== null) {
      content = Object.entries(value).map(([key, val], idx) => (
        <Text key={idx}>{key}: {val}</Text>
      ));
    } else {
      content = <Text>{value.toString()}</Text>;
    }
    return <View key={index}>{content}</View>;
  });
};

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