从Firestore获取新数据后，如何正确重新渲染屏幕？

Question

这是我的主屏幕外观：

我的应用基本上是一个聊天应用，您可以在其中与他人随机聊天。因此，每个“卡”都是一个聊天，可以单击（touchableOpacity）。卡具有地图功能，可将数据映射到视图。因此，如果我们的后端创建了新的聊天记录，则将在我们的firestore中创建一个新的文档。该应用具有onSnapshot侦听器，因此从firestore获取新数据后，将呈现新卡并将其添加到列表顶部。

卡片显示代码

this.props.groupData.map((data, i) => (
  <TouchableOpacity
    onPress={() => this.onCardPress(i)}
    key={data.id}
  >
    <View>
      <Text>{data.text}</Text>
    </View>
  </TouchableOpacity>
))

新卡在获取数据后显示，但是不可触摸。我不知道为什么渲染卡片时无法触摸。 TouchableOpacity是否未正确重新呈现？

有人可以帮我吗？

如果不清楚，请把一切都问我！