使用HOC,React Context和componentDidMount API从Firebase获取uid

时间:2019-02-13 18:22:48

标签: reactjs firebase-authentication higher-order-components react-context

我尝试使用HigherOrderComponent(HOC)将Firebase用户的uid提供给组件(Comp)。该值已成功检索,但在包装的组件(Comp)中无法成功获取。 下面,我描述了HOC和包装的组件(Comp)中事件的顺序:

HOC: constructor()设置state.uid = null; render()将Comp包装到具有value = this.state.uid的Provider组件中。 具有prop uid = {value}(其中值由Provider组件提供)的Consumer组件包装了Comp

在componentDidMount()中,我异步调用Firebase后端(firebase.auth.onAuthStateChanged())。

比较: render()触发; 触发componentDidMount()。 this.props.uid为null,因为异步调用尚未完成;

HOC: 在componentDidMount()中,对Firebase后端的调用得以解决。如果不为null,则执行this.setState({uid:value}),其中value是异步调用的值。这将触发HOC的新render()。返回具有 new 值this.state.uid的Provider组件。

比较: render()第二次运行; componentDidMount()应该运行,因此我可以访问this.props.uid并使用该值来检索数据和其他内容,但是... this.props.uid为空。

我认为componentDidUpdate应该在Component的render方法启动后运行,但是在这里不会发生。设置断点或console.log()可以显示这一点。

有趣的是,在Comp render()方法中,我显示this.props.uid对象(通过JSON.stringify())时显示了!因此render方法可以访问更新的props值,但是componentDidUpdate永远不会...

这是怎么了?我是否遗漏了一些东西:反应生命周期方法?

0 个答案:

没有答案