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

Posted 2023-02-19

【中文标题】React Native 将 2 个 Firestore 集合合并到一个 Flatlist 中

【英文标题】：React Native combine 2 Firestore collection in one Flatlist

【发布时间】：2021-12-02 05:23:51

【问题描述】：

我在 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') 并将其与地图结合，但它给出了错误

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

【参考方案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

【讨论】：

非常感谢。你救了我的命。

很高兴为您提供帮助@NatnichaChuen，如果您对我的答案进行投票并将其标记为解决方案，它也会对我有很大帮助。

先生，非常感谢！你的回复很好，帮助了我。此 Array 加入 2 个集合并显示在我的控制台中，但不显示在 expo 上。我使用 item.avatar，但仅在收藏帖子中展示。