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

Question

所以我想通过firebase函数设置访问，然后将此访问道具作为道具传递给选项卡组件，但是选项卡组件的初始状态为null，之后firebase auth功能正在解析。

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

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

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

或者

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

Answer 2

您可以进行条件渲染并且在您获得访问权限之前不渲染选项卡：

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

Answer 3

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