在 React Native 中将多个 Firestore 集合合并到一个 Flatlist 中

Question

我在 Firestore 中有这两个集合，我想在 React Native 中显示在一个 Flatlist 中。

第一个集合如下所示：（这是由用户创建的）

collection_1 : [
    {
     id: a1b2c3,
     name: 'joe'
    }
    {
     id2: d4e5f6,
     name: 'jane'
    }
    ]

第二个集合如下所示：（这是由好友用户创建的）

   collection_2: [
    {
     id: z9y8x7
     userId: 'a1b2c3',
     seenCount: 10,
    },
    {
     id: w7v6u5
     userId: 'd4e5f6'
     seenCount: 5,
    },
    ]

并且我想显示列表，其中名称和看到的计数彼此相邻，条件是 collection_1 id 与 collection_2 userId 相同：

     joe (10)
     jane (5)

但目前我的平面列表中只有 collection_1:

     <FlatList
        data={collection_1}
        keyExtractor={(item, index) => String(index)}
        renderItem={({ item }) => (
            <View>
               <Text>
                  {item.name}
               </Text>
            </View>
        )}
     />

Flatlist 可以吗？或者有更好的方法吗？

Answer 1

您应该从 2 个集合列表创建一个新数组。 data 是您在下面的示例中所需要的。

const collection1 = [
  {
    id: 'a1b2c3',
    name: 'joe'
  },
  {
    id: 'd4e5f6',
    name: 'jane'
  }
];

const collection2 = [
  {
    id: 'z9y8x7',
    userId: 'a1b2c3',
    seenCount: 10
  },
  {
    id: 'w7v6u5',
    userId: 'd4e5f6',
    seenCount: 5
  },
  {
    id: 'o1j3o2',
    userId: 'd4e5f6',
    seenCount: 7
  }
];

const seenCounts = {};
collection2.forEach((item) => {
  if (seenCounts[item.userId]) {
    seenCounts[item.userId] += item.seenCount;
  } else {
    seenCounts[item.userId] = item.seenCount;
  }
});

const data = collection1.map((item) => ({
  ...item,
  seenCount: seenCounts[item.id]
}));

console.log(data);

Answer 2

您需要组合数组，以便您的对象包含名称和屏幕（请运行片段）。

那你也可以这样做

<FlatList
    data={final}  //this is the combined array
    keyExtractor={(item, index) => String(index)}
    renderItem={({ item }) => (
        <View>
           <Text>
              {item.name} ({item.seenCount})
           </Text>
        </View>
    )}
 />

合并数组

let collection_1 = [{
    id: 'a1b2c3',
    name: 'joe'
  },
  {
    id: 'd4e5f6',
    name: 'jane'
  }
]


let collection_2 = [{
    id: 'z9y8x7',
    userId: 'a1b2c3',
    seenCount: 10,
  },
  {
    id: 'w7v6u5',
    userId: 'd4e5f6',
    seenCount: 5,
  }
]

let final = collection_2.map(user => {

  let name = collection_1.filter((users) => users.id === user.userId)[0].name
  return { ...user,
    name
  }


})

console.log('final', final)

在 React Native 中将多个 Firestore 集合合并到一个 Flatlist 中

Combine multiple Firestore collection in one Flatlist in React Native

javascript

react-native

react-native-flatlist

google-cloud-firestore