React native 从数组中的最后一个对象反应本机模式打开

我正在创建一个渲染方法，其中显示来自状态数组的信息，我希望这样，当用户触摸一张卡时，一个模式将打开，显示相同的信息

我的代码如下：

this.state = {
  fontLoaded: false,
  feed: [{
    username: ["Jeff", "Kyle", "David"],
    caption: ["Great", "Amazing", "Not so Good"],
    comments: ["Comment 1", "Comment 2", "No Comment"],
    photo:[Pic1,Pic2,Pic3],
  }]
}

state = {
    isModalVisible: false,
  };

  toggleModal = () => {
    this.setState({ isModalVisible: !this.state.isModalVisible });
  };

renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return card.username.map((username, i) => {
        if(card.caption[i])
          return (
            <View>
            <TouchableHighlight onPress={this.toggleModal} underlayColor="white">
            <Card
            key={`${i}_${index}`}
image={card.photo[i]}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
<View
    style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
  >
  <View style={{ flexDirection: 'row'}}>
    <Avatar 
        size="small"
        rounded
        source={card.photo[i]}
  />
    </View>
    <View style={{flexDirection:'row'}}>
 <Avatar
    rounded
    icon={{ name:'heart-multiple-outline', type:'material-community', color: '#ff4284'}}
      overlayContainerStyle={{marginLeft:5}}
        reverse
   size='small'/>
   <Avatar
        reverse
        rounded
  icon={{ name:'comment-processing-outline', type:'material-community' }}
  overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
   size='small'/>
    </View>
  </View>
    { this.state.fontLoaded == true ? (
      <View style={{flexDirection:'row'}}>
<Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text>
    <Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text>
  </View>
            ) : (<Text> Loading...</Text>)
      }
          <Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text>
</Card>
</TouchableHighlight>
<Modal 
animationIn="zoomInDown" 
animationOut="zoomOutDown" 
animationInTiming={700}
          animationOutTiming={600}
          backdropTransitionInTiming={600}
          backdropTransitionOutTiming={600}
           isVisible={this.state.isModalVisible}>
            <Image source={card.photo[i]}
            style={{width: SCREEN_WIDTH - 20,
                    height: 300, justifyContent: 'center', alignSelf: 
                    'center' }}/>
                    <Card
containerStyle={{ width: SCREEN_WIDTH - 20, marginTop: 0,  justifyContent: 'center', alignSelf: 
                    'center' }}>
<View style={{ flexDirection:'row' }}>
      <Avatar 
        size="small"
        rounded
        source={card.photo[i]}
  />
  <View style={{ flex:2, flexDirection:'row', justifyContent:'flex-end' }}>
    <Avatar
    rounded
    icon={{ name:'heart-multiple-outline', type:'material-community'}}
      overlayContainerStyle={{backgroundColor: '#ff4284',marginLeft:5}}
        reverse
   size='small'/>
   <Avatar
        reverse
        rounded
  icon={{ name:'comment-processing-outline', type:'material-community' }}
  overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
   size='small'/>
   </View>
   </View>
   <View style={{ flexDirection:'row' }}>
    <Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text>
    <Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text>
  </View>
    <Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text>
</Card>

            <Button style={{marginTop:0, borderBottomRightRadius: 20, borderBottomLeftRadius: 20, borderTopLeftRadius: 0, borderTopRightRadius: 0, width: SCREEN_WIDTH - 20, alignSelf: 'center', justifyContent: 'center'}} title="Close" onPress={this.toggleModal} />
        </Modal>
        </View>
          );
        return <React.Fragment />;
      });
    })
}

this.state={
错误:，
提要：[{
用户名：[“杰夫”、“凯尔”、“大卫”]，
描述：[“很棒”、“很棒”、“不太好”]，
评论：[“评论1”、“评论2”、“无评论”]，
照片：[图1，图2，图3]，
}]
}
状态={
isModalVisible:错误，
};
toggleModal=（）=>{
this.setState（{isModalVisible:！this.state.isModalVisible}）；
};
renderFeed=（）=>{
返回此.state.feed.map（（卡片，索引）=>{
返回卡.username.map（（username，i）=>{
if（卡片标题[i]）
返回(
{this.state.fontloadded==true(
{username}
{card.caption[i]}
)：（加载…）
}
{card.comments[i]}
{username}
{card.caption[i]}
{card.comments[i]}
);
返回；
});
})
}

---

除了无论触摸哪张卡，都会打开一个模式来呈现阵列中的最后一个对象之外，其他一切都可以完美地工作。因此，无论按下三张卡中的哪一张，都会打开一个模式，其中包含有关样本的David修改版的信息：

---

首先，为什么您需要为每张卡呈现模态组件，您可以在页面和切换功能中设置一个模态，以在模态中显示您需要的当前项。@Oleg我该怎么做？在切换模态中，您可以将当前项设置为状态，并在模态中获得您需要的内容。模态组件曾经退出映射函数。@Oleg我还是有点困惑，因为我是RN新手。你能给我再详细一点吗？我需要从我的代码中发布更多的信息吗？你能在expo零食中发布你的代码和演示示例吗？我得到了一个关于我的关键道具的警告，但是我认为我已经涵盖了这一部分。您是否认为代码中有任何东西可能导致此警告？这是基于您的代码的唯一示例，但是您可以在项目和重构中做出许多改进，但这不是当前问题的范围。