Question

这是我的componentDidMount方法。我想设置当前用户的状态，然后在设置该用户时调用该函数。我怎么能这样做？

  componentDidMount = () => {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({user: user})
      }
    });
    this.props.retrieveMatches(this.state.user.uid)
  }

我尝试过使用async / await，但我没有正确使用它：

  async componentDidMount = () => {
    await firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({user: user})
      }
    });
    this.props.retrieveMatches(this.state.user.uid)
  }

基本上我想在第7行调用道具功能之前等待第2-6行

Answer 1

你需要使用.setState()的回调函数：

componentDidMount = () => {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({user: user}, () => { 
        this.props.retrieveMatches(this.state.user.uid); 
      })
    }
  });
}

问候

Answer 2

我理解混乱，但该行使用回调而非Promise，所以你不应该使用async / await

它应该是：

componentDidMount = () => {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({user: user}, () => { this.props.retrieveMatches(this.state.user.uid); })
    }
  });
}

您可以使用async / await替换promises然后捕获调用

此

promise.then((result) => {...}).catch((error) => {});

会变成

try {
  const result = await promise();
} catch (error) {
  // do stuff
}

Answer 3

你不应该将反应生命周期方法设为异步。

在外部执行async await方法作为辅助函数，然后导入它：

在帮助文件中：

async asynchronousFn() {
    const result = await (your asynchronous code)
    return result
}

在组件中：

componentDidMount() {
    asynchronousfn().then(result => this.setState({ statekey: result }));
}

Answer 4

使用setState API上的callBack功能，您将解决问题。在链接中是setState的文档，因此您可以看到setState及其接受的参数。

当你看到onAuthStateChanged返回一个函数而不是一个承诺

时，我认为你不需要Async of Promise

componentDidMount = () => {
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({user: user}, () => { this.props.retrieveMatches(this.state.user.uid); 
    })
   }
 });  
}

异步等待组件确实挂载

4 个答案: