React Native嵌套FlatList时，如何正确获取父级FlatList索引？

你遇到的问题根源在于FlatList的renderItem回调参数结构理解有误——它接收的不是单独的item和index，而是一个包含这两个属性的对象。你直接解构成(item, index1)的话，第二个参数index1其实是undefined，因为回调只传了一个对象进去。

正确的写法步骤： #

• 外层FlatList的renderItem要解构参数对象，拿到item和index（也就是你想要的index1）；
• 借助闭包特性，让内层FlatList的renderItem能直接访问到外层的父级索引值。

完整代码示例： #

<FlatList
  data={this.state.data}
  // 外层正确解构renderItem的参数对象
  renderItem={({ item: parentItem, index: index1 }) => (
    <View>
      <FlatList
        data={this.state.data2}
        // 内层同样解构参数，同时直接使用外层的index1
        renderItem={({ item: childItem, index: index2 }) => {
          console.log("parent_index", index1);
          console.log("child_index", index2);
          // 这里返回你的子列表项组件，示例用文本展示索引
          return <Text>父索引：{index1} | 子索引：{index2}</Text>;
        }}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  )}
  keyExtractor={(item, index) => index.toString()}
/>

额外提示： #

• 务必给两个FlatList都加上keyExtractor属性，避免React抛出列表项缺少唯一key的警告；
• 如果实际业务中每个父项对应的子数据不同，可以把this.state.data2替换成parentItem.childData这类和父项关联的数据，让嵌套列表逻辑更合理。

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