React Native：FlatList 索引说未定义答案

【问题标题】：React Native: FlatList index says is undefinedReact Native：FlatList 索引说未定义
【发布时间】：2019-09-25 18:41:15
【问题描述】：

我正在尝试在 react native 中检索 FlatList 上单击元素的索引。正如文档所说，我将索引传递给 renderItem 道具。我的代码如下：

/**
 * Goes to the show view of a container
 * @param {*} index 
 */
showContainer = (index) => {
    console.log(index); 
}

render() {
    return (
        <DefaultScrollView style={styles.container}>
            <FlatList
                data={this.props.containers}
                renderItem={(data, index) => (
                    <ListItem
                        containerStyle={{borderBottomWidth: 1, borderBottomColor: "#000"}}
                        key={data.item.id}
                        leftAvatar={Image}
                        onPress={() => {this.showContainer(index)}}
                        rightIcon={{ name: "ios-eye", type: "ionicon" }}
                        subtitle={
                            `${data.item.dummy === true? 'Por favor configura tu dispositivo' : 'Contenido actual: '}`
                        }
                        subtitleStyle={(data.item.dummy == true)? [styles.configurationText, styles.subtitule] : styles.subtitule}
                        title={data.item.name}
                        titleStyle={styles.title}
                    />
                )}/>
        </DefaultScrollView>
    );
}

唯一可行的方法是如果我将数字作为索引传递，例如： renderItem={(data, index = 0)，但是如何传递索引变量以始终具有正确的索引？

提前致谢

【问题讨论】：

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

【解决方案1】：

您需要解构您的数据，然后再将其传递给renderItem。

所以改变：

 renderItem={(data, index) => ( ...

收件人：

 renderItem={({item, index}) => (...

然后您可以使用item.id 访问您的数据。

简化的工作演示：

https://snack.expo.io/B1AONkehN

【讨论】：

【解决方案2】：

代码中的问题是：

您的代码：

   renderItem={(data, index) => (

正确的一个：

 renderItem={({ item, index }) => (

您可以更新您的 renderItem，它会解决您的问题。：

renderItem={({ item, index }) => (
           <ListItem
                        containerStyle={{borderBottomWidth: 1, borderBottomColor: "#000"}}
                        key={data.item.id}
                        leftAvatar={Image}
                        onPress={() => {this.showContainer(index)}}
                        rightIcon={{ name: "ios-eye", type: "ionicon" }}
                        subtitle={
                            `${data.item.dummy === true? 'Por favor configura tu dispositivo' : 'Contenido actual: '}`
                        }
                        subtitleStyle={(data.item.dummy == true)? [styles.configurationText, styles.subtitule] : styles.subtitule}
                        title={data.item.name}
                        titleStyle={styles.title}
                    />
        )}

【讨论】：

【解决方案3】：

只需将data, index 包装成{} 并将每个data 更改为item，

  renderItem={({item, index}) => ( ....
              ....
              key={item.item.id} // like this every where

【讨论】：