如何通过异步函数设置反应父组件状态，然后将此状态作为props传递给子组件？

Question

so i want to set the access by firebase function and then pass this access props to tabs component as props ,but tabs component is get the initial state null,firebase auth funtion is resolving after that .

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}/>
  }
}

Answer 1

You can do conditional rendering and not render the tabs until you get access:

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

Answer 2

It should not be a problem. When you update the state, the component will re-render and all its children will also be re-rendered. If you don't want to render anything while access is null try the following code.

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}/>}
  }
}

OR

{access ? <Tab access={access}/> : 'Not Authorized'}

Answer 3

componentDidMount function is called after the render and even though you have your call in componentWillMount , since its an async call, it will only be resolved after the component render cycle has been triggered and hence the data will only have a value after render. In order to correctly handle such a scenario, you must conditionally render your data in the render.

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}/>
  }
}