reactjs - React Native Expo：如何使用 Firebase 从集合中的多个文档中查询选择字段？

Question

我目前正在尝试使用 Firebase 在我的应用程序上同步我的宠物列表，以便可以这样显示：

（图片）
名称品种年龄
庇护所

但是，我在尝试编写代码时遇到了困难，因为我只能从一个文档中查询，如下面的代码所示：

    db.collection("pets").doc("dog01").get()
        .then(doc => {
              console.log(doc.data());
              this.setState({ 
                name: doc.data().name,
                shelter: doc.data().shelter,
                gender: doc.data().gender,
                age: doc.data().age,
                breed: doc.data().breed,
              });
        })
        .catch(err => {
          console.log('Error getting documents', err);
        });

有没有办法解决？

标签： reactjsfirebasereact-nativegoogle-cloud-firestoreexpo

Answer 1

您需要从集合中查询文档，然后在组件的渲染中显示（您使用的是类组件，对吗？）。

首先，不要忘记声明state：

state = {
  pets: []
}

查询每只萌宠的方法：

async getPets() {
  const snapshot = await db.collection("pets").get()
  const pets = snapshot.docs.map(doc => doc.data());

  this.setState({ pets });
}

组件挂载到屏幕时调用 fetch 方法：

async componentDidMount() {
  this.getPets();
}

在 render 里面，你只需要映射每个文档来显示：

render() {
  return (
    <View style={{ flex: 1 }}>
      { this.state.pets.map(pet => (
        <View>
          <Text>{ pet.name }</Text>
        </View>

        <View>
          <Text>{ pet.shelter }</Text>
        </View>

        <View>
          <Text>{ pet.gender }</Text>
        </View>

        <View>
          <Text>{ pet.age }</Text>
        </View>

        <View>
          <Text>{ pet.breed }</Text>
        </View>
      )) }
    </View>
  );
}