如何在方法中等待Firebase,获取数据并返回数组?

时间:2019-05-08 16:21:13

标签: javascript reactjs

所以我在容器组件中有此方法:

getProfilesOptions = () => {

    const result = firebase.firestore().collection('roles').get().then(snapshot => {
      const options = []

      snapshot.docs.forEach(doc => {
        options.push({ value: doc.id, label: doc.data().profile })
        //console.log(doc.id) - everything ok, i'm fetching data correctyly
      });
      return options
    })
    console.log(result)//here i have pending result in debugger
    return result
  }

然后,我将链接传递给child ... child ... child组件。

然后我想给一个孩子打电话,结果得到数组,然后设置状态:

componentDidUpdate() {
    if(this.state.isFocused && !this.state.options){

      const options = this.props.getOptions()

      this.setState({
        options: options
      })
    }
  }

我可以解决这个问题吗?当然,我可以将道具作为结果传递,而不是将道具引用传递给该方法,但是我可以使用该方法吗?如何改善 getProfilesOptions?

1 个答案:

答案 0 :(得分:3)

您应该将Firebase调用包装在Promise中,因为这是异步调用。

getProfilesOptions = () => {
   return new Promise(resolve => {
      firebase.firestore().collection('roles').get().then(snapshot => {
        const options = []

        snapshot.docs.forEach(doc => {
          options.push({ value: doc.id, label: doc.data().profile })
          //console.log(doc.id) - everything ok, i'm fetching data correctyly
        });
        resolve(options)
      })                                                          
   }  
}

然后使用.then()在您的组件中获取结果

componentDidUpdate() {
  if(this.state.isFocused && !this.state.options){

    this.props.getOptions().then(options => {
      this.setState({
        options: options
      })
    })

  }
}

您可以了解有关Javascript承诺here

的更多信息