arrays - 从 Flatlist 获取嵌套数组的键

Question

我有一个平面列表正在接收具有以下数据结构的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 >
    )
}

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

Answer 2

虽然我理解是

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

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