从 Flatlist 获取嵌套数组的键答案

【问题标题】：Get Key of nested Array from Flatlist从 Flatlist 获取嵌套数组的键
【发布时间】：2020-10-27 12:53:16
【问题描述】：

我有一个平面列表正在接收具有以下数据结构的friendsArray...

我有一个具有 onPress 功能的模式，我想通过 onPress 获取此键的值。我有以下代码，但通常此代码为我提供了我刚刚在平面列表中选择的任何内容的密钥...我想更深入地获得所选项目的密钥，我该怎么做？

这里是 App.js

onFriendChatPress = key => {
   let friend = this.state.friendsArray.find(game => { return game.key === key })
}


render(){
return{
    <View>
        <FriendsModal
            onChatPress={() => this.onChatPress()}
            onClosePress={() => this.closeModal()}
            onFriendPress={() => this.onFriendPress()}
            onFriendChatPress={() => this.onFriendChatPress()}
            selGame={this.state.selGame}
            visible={this.state.modalVisible}
            selGame={this.state.selGame}
        />
    </View>
}

这里是 FriendsModal 中的 FlatList

      <FlatList
           style={styles.flatList}
           data={this.props.selGame.friends}
           horizontal={true}
           renderItem={(info) => (
                       <ModalProfileCard
                               displayName={info.item.displayName}
                               image={info.item.image}
                               onFriendPress={() => this.props.onFriendPress(info.item.key)}
                               onFriendChatPress={() => this.props.onFriendChatPress(info.item.key)}
                        />
                       )
                      }
              />

这是模态中的卡片


function modalProfileCard(props) {
    return (
        <View style={styles.container}>
            <TouchableOpacity onPress={props.onFriendsPress} style={styles.friendInfo}>
                <Image style={styles.profImage} source={{ uri: props.image }} />
                <View style={styles.nameContainer}>
                    <Text style={styles.name}>{props.displayName}</Text>
                </View>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button} onPress={props.onFriendChatPress}>
                {buttonText}
            </TouchableOpacity>
        </View >
    )
}

【问题讨论】：

分享您的平面列表代码和 onPress 您打开模式的位置
@NooruddinLakhani - 我添加了您要求的更多细节，有什么想法吗？
在您的代码中如此混乱，在 renderItem 中，您不应该使用 info.displayName 而不是 info.item.displayNam 吗？
@NooruddinLakhani - info.item.displayName 有效，info.displayName 未定义

标签： arrays react-native react-native-flatlist flatlist

【解决方案1】：

你可以这样做。

const onPress = (key) => {
   //you have the key here
}

return ( 
     <Flatlist 
     data={your_data}
     renderItem={({item})=> <YourComponent {...item} onPress={onPress} />}
/> )



const YourComponent = ({key,onPress}) => {
     const onPress = () => {
        onPress(key);
     } 
   return (
      <TouchableOpacity onPress={onPress}>
      </TouchableOpacity>
  )
}

【讨论】：

【解决方案2】：

虽然我理解是

在 renderItem 中，你不应该使用 info.displayName 代替 info.item.displayNam 吗？等等..

还有一个父FlatList？您将所选游戏的状态保存为 selGame 对吗？您也可以保存它的索引，并可以传递给子组件，这样很容易找到所选游戏的密钥。

【讨论】：