Firebase，React：将 GET 请求从 get() 方法更改为 onSnapshot() 方法答案

【问题标题】：Firebase, React: Changing a GET request from get() method to onSnapshot() methodFirebase，React：将 GET 请求从 get() 方法更改为 onSnapshot() 方法
【发布时间】：2021-01-29 12:59:28
【问题描述】：

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

      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() 方法，这是我的（粗略）尝试：

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 is not a function。谁能建议如何重新配置我的代码，以便我可以使用快照方法，而不是我的 axios 获取请求？

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore react-router

【解决方案1】：

querySnapshot 是一个QuerySnapshot 对象。正如您从 API 文档中看到的那样，该对象上没有方法 filter。如果您想要过滤某些内容，也许您打算使用它的docs 属性，它是一个包含实际文档数据的QueryDocumentSnapshot 对象数组。所以，也许你想要的是更像这样的东西：

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

【讨论】：

【解决方案2】：

如果您查看文档，onSnapshot() 方法会返回 QuerySnapshot。 QuerySnapshot 有一个 docs 属性，其中包含快照中的所有文档。所以你可以像这样过滤它们：

firebase.firestore().collection('gig-listing').onSnapshot(querySnapshot => querySnapshot.docs.filter(d => {
  const data = d.data()
  // Do whatever with data
})

【讨论】：