как установить реакцию родительского компонента с помощью асинхронной функции, а затем передать это состояние дочернему элементу в качестве реквизита?

поэтому я хочу установить доступ с помощью функции firebase, а затем передать эти реквизиты доступа компоненту вкладок в качестве реквизита, но компонент вкладок получает начальное состояние 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}/>
  }
}

reactjs javascript async-await react-props react-lifecycle
person yash    schedule 23.09.2018    source источник
comment
кстати. вы можете просто использовать this.setState({ access: true }), аргумент функции полезен, если вы хотите воздействовать на возможные новые значения состояния в момент применения нового состояния (документы)   -  person Łukasz Godziejewski    schedule 23.09.2018

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете выполнить условный рендеринг и не отображать вкладки, пока не получите доступ:

return this.state.access 
    ? <Tab access={this.state.access}/> 
    : <div>Not authorized</div>
person Sagiv b.g    schedule 23.09.2018

arrow_upward
1
arrow_downward

Это не должно быть проблемой. Когда вы обновляете состояние, компонент будет повторно отображаться, и все его дочерние элементы также будут повторно отображаться. Если вы не хотите ничего отображать, пока доступ равен нулю, попробуйте следующий код.

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'}
person Shubham Gupta    schedule 23.09.2018

arrow_upward
0
arrow_downward

Функция 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}/>
  }
}
person Shubham Khatri    schedule 23.09.2018