React Native嵌套数组渲染问题：如何用FlatList展示多维数组的title

我在React Native应用中使用Expo在手机上模拟时，无法成功渲染多维数组，希望遍历并展示数组中所有项的title值。尝试过嵌套FlatList的逻辑，但仍未成功，应该是细节问题导致的。

测试数据 #

const DATAARRAY = [
{
  sdata: [
    {
      id: 'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'One',
    },
    {
      id: '3ac68afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Two',
    },
    {
      id: '58694a0f-3da1-471f-bd96-145571e29d72',
      title: 'Three',
    },
    {
      id: 'bd7acwea-c1b1-46c2-aed5-3ad53abb28ba',
      title: 'Four',
    },
    {
      id: '3ac62afc-c605-48d3-a4f8-fbd91aa97f63',
      title: 'Five',
    },
    {
      id: '58692a0f-3da1-471f-bd96-145571e29d72',
      title: 'Six',
    },
  ]
}
];

Item组件（用于渲染标题文本） #

// Item组件
const Item = ({ title }) => (
  <View>
    <Text>{title}</Text>
  </View>
);

存在逻辑问题的FlatList代码 #

// 当前FlatList代码
<FlatList style={styles.flatList}
  data={DATAARRAY}
  keyExtractor={item => 'sdata'}
  renderItem={({ item }) => (
    <FlatList
      data={item}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <Item title={item.title} />}
    />
  )}
/>

问题修复方案 #

你的嵌套FlatList有两个核心错误：

1. 外层FlatList的keyExtractor使用了固定字符串sdata，不符合唯一key的要求；
2. 内层FlatList的data传入了整个外层对象，实际应该传入对象中的sdata数组。

修复方式1：修正嵌套FlatList #

<FlatList style={styles.flatList}
  data={DATAARRAY}
  // 用索引作为外层唯一key（若外层数据有id，优先用id）
  keyExtractor={(item, index) => index.toString()}
  renderItem={({ item }) => (
    <FlatList
      // 传入正确的子数组
      data={item.sdata}
      keyExtractor={item => item.id}
      renderItem={({ item }) => <Item title={item.title} />}
    />
  )}
/>

修复方式2：扁平化数组后用单个FlatList渲染（更高效） #

如果不需要保留原多维结构，可以先将数组扁平化，再用单个FlatList渲染：

// 扁平化数据
const flattenedData = DATAARRAY.flatMap(item => item.sdata);

// 单个FlatList渲染
<FlatList style={styles.flatList}
  data={flattenedData}
  keyExtractor={item => item.id}
  renderItem={({ item }) => <Item title={item.title} />}
/>

两种方式都能正常展示所有title值，扁平化方案性能更优，适合无需保留外层层级的场景。

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