Javascript 如何通过异步函数设置react父组件状态，然后将此状态作为道具传递给子组件？

所以我想设置通过firebase访问的函数，然后将这个访问道具作为道具传递给tabs组件，但是tabs组件的初始状态为null，firebase身份验证函数在此之后解析

class Admin extends React.Component {
  state = {
    access: null,
  };
  componentDidMount() {
    this.unListen = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState(() => ({ access: true }));

      }
    });
  }

  componentWillUnmount() {
    this.unListen();
  }

render(){
return <Tab access={this.state.access}/>
  }
}

类管理扩展了React.Component{
状态={
访问权限：null，
};
componentDidMount（）{
this.unListen=firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
this.setState（（）=>（{access:true}））；
}
});
}
组件将卸载（）{
这是我的；
}
render（）{
返回
}
}

在获得访问权限之前，您可以执行或不呈现选项卡：

return this.state.access 
    ? <Tab access={this.state.access}/> 
    : <div>Not authorized</div>

返回this.state.access
?  
：未经授权

这应该不是问题。更新状态时，组件将重新渲染，其所有子组件也将重新渲染。如果不希望在access为null时呈现任何内容，请尝试以下代码

class Admin extends React.Component {
  state = {
    access: null,
  };
  componentDidMount() {
    this.unListen = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState(() => ({ access: true }));

      }
    });
  }

  componentWillUnmount() {
    this.unListen();
  }

  render(){
    const access = {this.state};
    return {access && <Tab access={access}/>}
  }
}

类管理扩展了React.Component{
状态={
访问权限：null，
};
componentDidMount（）{
this.unListen=firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
this.setState（（）=>（{access:true}））；
}
});
}
组件将卸载（）{
这是我的；
}
render（）{
const access={this.state}；
返回{access&&}
}
}

或

{access？：“未授权”}

componentDidMount

函数在渲染后被调用，即使您在

componentWillMount

中有调用，由于它是一个异步调用，因此只有在触发组件渲染周期后才会解析，因此数据在渲染后才会有值。为了正确处理这种情况，必须在渲染中有条件地渲染数据

class Admin extends React.Component {
  state = {
    access: null,
  };
  componentDidMount() {
    this.unListen = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState(() => ({ access: true }));

      }
    });
  }

  componentWillUnmount() {
    this.unListen();
  }

  render(){
    const { access } = this.state;
    if(access !== null) {
         return null;
    }
    return <Tab access={this.state.access}/>
  }
}

类管理扩展了React.Component{
状态={
访问权限：null，
};
componentDidMount（）{
this.unListen=firebase.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
this.setState（（）=>（{access:true}））；
}
});
}
组件将卸载（）{
这是我的；
}
render（）{
const{access}=this.state；
如果（访问！==null）{
返回null；
}
返回
}
}

btw。您可以使用

this.setState（{access:true}）

，如果您想在应用新状态时对可能的新状态值进行操作（）

class Admin extends React.Component {
  state = {
    access: null,
  };
  componentDidMount() {
    this.unListen = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState(() => ({ access: true }));

      }
    });
  }

  componentWillUnmount() {
    this.unListen();
  }

  render(){
    const { access } = this.state;
    if(access !== null) {
         return null;
    }
    return <Tab access={this.state.access}/>
  }
}