React Native 获取 Flatlist 索引答案

【问题标题】：React Native Get Flatlist IndexReact Native 获取 Flatlist 索引
【发布时间】：2020-05-24 21:06:32
【问题描述】：

我在平面列表中使用平面列表，我想获取我使用的第一个平面列表的索引
代码如下：

<FlatList
  data ={this.state.data}
  renderItem = {(item, index1)=>
    <View>
      <FlatList
        data = {this.state.data2}
        renderItem = {(item, index2) => 
          console.log("parent_index",index1);
          console.log("child_index",index2);
        }
      />
    </View>
  }

我怎样才能得到 index1？
我在上面的代码中所做的是未定义的。

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

第一个平面列表的代码

render() {
    return (
        <View style={{ height: "100%", width: "100%", backgroundColor: 'red' }}>
          <FlatList
            data={this.state.data}
            renderItem={({ item, index }) => {
              return (
                this.renderSecondFlatlist(index)
              );

            }
            }
          />
        </View>
    )
  }

第二个 flatList 的代码，您将在其中传递第一个 FlatList 的“索引”

 renderSecondFlatlist(index1) {
        return (
          <View style={{ flex: 1, backgroundColor: 'pink' }}>

            <FlatList
              data={this.state.data2}
              renderItem={(item, index2) => {
                /*return (
                  <Text>{index1}</Text>
                );*/
                console.log("index:-",index1);
              }
              }
            />
          </View>
        );
      }

【讨论】：

【解决方案2】：

你需要 onPress 将获取索引的处理程序，例如：

onPress={()=>this.getItem(index)} 和处理程序：

getItem=index=>this.setState(prevState=>({selectedByIndex:[index, ...prevState.selectedByIndex]})

【讨论】：

【解决方案3】：

你应该使用 FlatList 的 keyExtractor 属性。

<FlatList
  data ={this.state.data}
  keyExtractor={(item, index) => index}
  renderItem = {(item, index)=>
    <View>
      <FlatList
        data = {this.state.data2}
        renderItem = {(item, index) => 
          console.log("parent_index",index);
        }
      />
    </View>
  }

【讨论】：

在那之后我在子索引上未定义