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

Question

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

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

Функция

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

Answer 3

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

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