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

Question

我在 Firestore 中有 2 个集合可以像这样进行 FeedScreen

收集用户（用户注册App时）

users = [
    avatar: '',
    email: '',
    name: ''
]

收集帖子（当用户创建帖子时）

posts = [
   image: '',
   text: '',
   timestamp: '',
   uid: ''
]

我喜欢useState 收集这样的帖子

const [loading, setLoading] = useState(true);
const [post, setPost] = useState([]); // Initial empty array of users

useEffect(() => {
  const subscriber = firebase
    .firestore()
    .collection("posts")
    .orderBy("timestamp", "desc")
    .onSnapshot((querySnapshot) => {
      const post = [];

      querySnapshot.forEach((doc) => {
        post.push({
          key: doc.id,
          name: doc.data().name, //want name from collection users
          text: doc.data().text,
          timestamp: doc.data().timestamp,
          avatar: { uri: doc.data().avatar }, //want avatar from collection users
          image: { uri: doc.data().image },
        });
      });

      setPost(post);
      setLoading(false);
    });

  // Unsubscribe from events when no longer in use
  return () => subscriber();
}, []);

if (loading) {
  return <ActivityIndicator />;
}

还有Flatlist

<FlatList
  style={styles.feed}
  data={post}
  renderItem={({ item }) => this.renderPost(item)}
  keyExtractor={(item) => item.key}
  showsVerticalScrollIndicator={false}
/>;

我尝试 useState collection('users') 并将其与地图结合，但它给出了错误

我想将提要与帖子中的所有数据一起显示到平面列表，并从用户集合中获取头像和姓名。

Answer 1

您应该从 2 个集合列表中创建一个 new array，.data 是您在以下示例中所需要的。

const users = [
  {
    id: “”,
    avatar: “ “ ,
    email : “ “ ,
    name: ""
  },
];

const post = [
  {
    image: "", 
    text: "", 
    timestamp: ,, 
    uid: ""
  }
];


const collectionUsers = {}:
users.forEach((item) => {
  if(collectionUsers[item.id] {
     collectionUsers[item.id] += item.avatar;
  } else {
    collectionUsers[item.id] = item.avatar;
  }
});


const data = post.map((item) => ({
   … item,
   avatar: collectionUsers[item.id]
})):

console.log(data);


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

可以帮助您的其他文档：

https://www.tutorialguruji.com/javascript/combine-multiple-firestore-collection-in-one-flatlist-in-react-native/

https://rnfirebase.io/firestore/usage-with-flatlists

https://medium.com/@harshita.arun.1/firebase-to-flatlist-react-native-5281718969ab