Firebase，React:将GET请求从get()方法更改为onSnapshot()方法 [英] Firebase, React: Changing a GET request from get() method to onSnapshot() method

问题描述

我编写了一个函数，该函数从Firestore中获取数据，对其进行过滤，并返回登录用户仅仅发布的数据.在这种情况下，数据是演出列表:

I've written a function that gets data from my firestore, filters through it, and returns data posted only by the logged-in user. The data, in this case, are gig listings:

      authListener() {
        auth().onAuthStateChanged((user) => {
          if (user) {
            this.setState(
              {
                userDetails: user
              },
              () =>
                axios
                  .get(
                    "https://us-central1-gig-fort.cloudfunctions.net/api/getGigListings"
                  )
                  .then((res) => {
                    let filteredGigs = res.data.filter((gig) => {
                      return gig.user === this.state.userDetails.uid;
                    });
                    this.setState({
                      filterGigs: filteredGigs
                    });
                  })
            );
          } else {
            this.setState({
              userDetails: null,
            });
            console.log("no user signed in");
          }
        });
      }

但是，当我呈现这些数据时，我希望将其实时订阅数据库更改，并且还希望能够访问文档ID.为此，我想将此函数更改为使用 onSnapshot()方法，这是我的(粗略的)尝试:

However, when I render this data, I want it to be subscribed in real time to database changes, and I also want to be able to access the document id. In order to do this, I want to change this function to use the onSnapshot() method, here's my (rough) attempt:

authListener() {
    auth().onAuthStateChanged((user) => {
    if (user) {
    this.setState(
    {
        userDetails: user
    },
    () =>
    firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot=> {
    let filteredGigs = querySnapshot.filter(gig => {
        return gig.user === this.state.userDetails.uid;
        })
    })
    this.setState({
        filterGigs: filteredGigs
        });
    })
);
 

此代码无法正常工作，我感觉有多个问题，但是我得到的主要错误是 querySnapshot.filter不是函数.谁能建议如何重新配置​​我的代码，以便我可以使用快照方法而不是axios获取请求?

This code isn't working and I have a feeling there's more than one issue, but the main error I'm getting back is querySnapshot.filter is not a function. Can anyone suggest how to re-configure my code so I can use the snapshot method, instead of my axios get request?

推荐答案

querySnapshot是文档属性，它是 QueryDocumentSnapshot 的数组包含实际文档数据的对象.所以，也许您想要的是这样的东西:

querySnapshot is a QuerySnapshot object. As you can see from the API documentation, there is no method filter on that object. If you want something to filter, perhaps you meant to use its docs property, which is an array of QueryDocumentSnapshot objects that contain the actual document data. So, maybe something more like this is what you want:

let filteredGigs = querySnapshot.docs.filter(snapshot => {
  return snapshot.data().user === this.state.userDetails.uid;
})

这篇关于Firebase，React:将GET请求从get()方法更改为onSnapshot()方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！