Reactjs React Native:FlatList索引表示未定义

我试图在react native中检索平面列表上单击元素的索引。 正如文档所说，我正在向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>
    );
}

/**
*转到容器的“显示”视图
*@param{*}索引
*/
showContainer=（索引）=>{
控制台日志（索引）；
}
render（）{
返回(
(
{this.showContainer（index）}
rightIcon={{name:“ios眼”，键入：“ionicon”}
副标题={
`${data.item.dummy==true？'Por-favor configura tu dispositivo'：'Contenido-actual:'}`
}
SubtituteStyle={（data.item.dummy==true）？[styles.configurationText，styles.subtitule]：styles.subtitule}
title={data.item.name}
标题样式={style.title}
/>
)}/>
);
}

唯一有效的方法是将数字作为索引传递，例如：

renderItem={（data，index=0）

，但是如何传递索引变量以始终具有正确的索引

---

提前感谢

只需将

数据打包，用
{}
索引

，并将每个

数据

更改为

项

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

代码中的问题是：

您的代码：

   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}
                    />
        )}

renderItem={（{item，index}）=>(
{this.showContainer（index）}
rightIcon={{name:“ios眼”，键入：“ionicon”}
副标题={
`${data.item.dummy==true？'Por-favor configura tu dispositivo'：'Contenido-actual:'}`
}
SubtituteStyle={（data.item.dummy==true）？[styles.configurationText，styles.subtitule]：styles.subtitule}
title={data.item.name}
标题样式={style.title}
/>
)}

在将数据传递给

renderItem

之前，您需要对数据进行解构

因此，改变：

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

致：

然后，您可以使用

item.id

访问数据

简化工作演示：

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