将高阶组件反应到 firebase 身份验证不会将更新状态发送到组件

Question

我是 React 新手，我正在尝试在 React 中使用 firebase 进行身份验证。我已经创建了一个更高阶的组件来从本质上丰富组件的用户状态并验证用户是否通过身份验证。下面是我的 WithAuthentication.js 并且在 componentDidmount 中的组件本身我正在尝试检查用户是否已登录。

import React, { Component } from 'react';
import { FirebaseContext } from '../firebase';

export default WrappedComponent => {
class WithAuthentication extends Component {
    state = {
    user:null,
    isSignedin:false
    };

    componentDidMount() {

        let firebase = this.context       
        firebase.auth().onAuthStateChanged(user => {
        if (user) {
        console.log(user)  
        this.setState({ 
            user: user.providerData,
            isSignedin: true
        });
        console.log(this.state.isSignedin);
        } else {
        console.info('Must be authenticated');          
        }
    });
    }

    render() {
    return this.state.isSignedin ? (
        <WrappedComponent
        {...this.props}
        user={this.state.user}
        isSignedin={this.state.isSignedin}
        />
    ) : (
        <WrappedComponent
        {...this.props}
        user={"NOTUSER"}
        isSignedin={this.state.isSignedin}
        />
    );
    }
}
WithAuthentication.contextType =FirebaseContext
return WithAuthentication;
};

组件文件。

componentDidMount() {
let firebase = this.context
console.log(this.props);    
const db = firebase.firestore();
var turmarkers =[];

this.setState({isSignedin:this.props.isSignedin})
console.log(this.state.isSignedin);    
this.state.isSignedin  ? 
db.collection("Markets").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
      var mdata = doc.data()
      mdata["key"] = doc.id  
      turmarkers.push(mdata)

  });

  this.setState({
      mapdata:turmarkers
  });
 })    
:
console.log("this is not a user")    
}

在第一个渲染中，child 组件得到一个错误的标记，在 WithAuthentication.js 将它的 isSignedin 状态更改为 true 之后。我希望 child 组件状态在包装器状态更新后立即更新。但它不会发生。包装器组件中的状态已更新，但未传递给 child。

我试过直接检查道具 isSignedin 以查看它是否在 child 中发生变化，但它没有。

Answer 1

我想我找到了答案，关键是检查身份验证是否完成，然后检查身份验证是否验证了用户是否已登录。下面是回答的地方。

将高阶组件反应到 firebase 身份验证不会将更新状态发送到组件

React higher order component to firebase authenticate does not send updated state to the component

reactjs

firebase

google-oauth

higher-order-components