如何在渲染之前等待异步componentDidMount()完成?
我的app.jsx:
constructor(props) { super(props); this.state = { loggedInUser: null, isAuthenticated: false, isAuthenticating: true }; } componentDidMount() { try { var user = authUser(); console.log('User: ' + user) if (user) { console.log('Is logged in: ' + this.state.loggedInUser) this.userHasAuthenticated(true); } } catch(e) { alert(e); } this.setState({ isAuthenticating: false }); } render() { console.log('in render: ' + this.state.loggedInUser) // Should execute **after** authUser() in componentDidMount has finished ... }
componentDidMount调用此异步函数:
function authUser() { firebase.auth().onAuthStateChanged(function(user) { return user }) } console.log('in render: ' + this.state.loggedInUser)
如何使render方法在componentDidMount中等待authUser()?
不要等待componentDidMount渲染完成,否则会滥用该库,请等待您authUser完成。
componentDidMount
authUser
您可以通过结合使用isAuthenticatingstate属性来实现promises。
isAuthenticating
promises
function authUser() { return new Promise(function (resolve, reject) { firebase.auth().onAuthStateChanged(function(user) { if (user) { resolve(user); } else { reject('User not logged in'); } }); }); }
您可以isAuthenticating如下使用现有标志:
componentDidMount() { authUser().then((user) => { this.userHasAuthenticated(true); this.setState({ isAuthenticating: false }); }, (error) => { this.setState({ isAuthenticating: false }); alert(e); }); }
然后在内部渲染:
render() { if (this.state.isAuthenticating) return null; ... }
这将防止您的组件在authUser功能完成之前被添加到DOM中。