Question

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

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？

Answer 1

您应该将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

的更多信息

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

1 个答案: