Заставить React ждать окончания запроса Firebase

Question

Я звоню в Firebase, чтобы проверить, есть ли у пользователя свойство.

Если у него есть, я хочу, чтобы он был перенаправлен на страницу A, иначе я хочу перенаправить его на страницу B.

Проблема в том, что, я думаю, Firebase занимает много времени, чтобы вернуться, поэтому React просто отображает компонент со значением по умолчанию.

Мой код:

export default class CheckIfHasCurrentTasksComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            questionId: this.props.match.params.id
        };
    }

    async componentDidMount() {
        var uid = firebase.auth().currentUser.uid;
        var AssignedWordRef = await firebase.database().ref('Users').child(uid).child('assignedWork');
        await AssignedWordRef.on('value', snapshot => {
            var question = snapshot.val();
            console.log('question', question);
            if (question.length > 0) {
                this.setState({
                    questionId: question,
                });
                console.log('redirect', this.state.questionId);
            }
            else {
                this.setState({
                    questionId: this.props.match.params.id,
                });
                console.log('No redirect', this.state.questionId);
            }
        })
    }

    render() {
        console.log('questionId', this.state.questionId);
        return <QuestionComponent questionId={this.state.questionId}/>
    }
}

Журналы:

questionId -LEU6zUnLTO84KGh3pua     CheckIfHasCurrentTasksComponent.js:35
question -LEU1fr2TmxHFKD3ObG_       CheckIfHasCurrentTasksComponent.js:18
questionId -LEU1fr2TmxHFKD3ObG_     CheckIfHasCurrentTasksComponent.js:35
redirect -LEU1fr2TmxHFKD3ObG_       CheckIfHasCurrentTasksComponent.js:23

Кажется, код почему-то запускается дважды.Идентификатор идет от предыдущего компонента.Последние 3 взяты из базы данных.

Смущает то, что они регистрируются как асинхронные.Как я могу сделать его синхронным / ждать ответа от Firebase?

this.props.match.params.id - это идентификатор, полученный от предыдущего компонента.Этот действует хорошо.

Answer 1

Смущает то, что они регистрируются как асинхронные.Как я могу сделать его синхронным / ждать ответа от Firebase?

Есть подход, при котором вы можете сделать так, чтобы он выглядел синхронно.

Вы можете присоединить к этому классу переменную, которая по умолчанию равна false.Как только вы получили ответ, вы можете установить эту переменную на true.

Например -

this.state.isQuestionIDAvailable=false;

И в вашем ответе из базы данных (позаботьтесь о thisобласть действия при его использовании)

this.setState({
    isQuestionIDAvailable: true
 });

Затем вы можете прикрепить условие к вашему компоненту, например -

{this.state.isQuestionIDAvailable && <QuestionComponent />}

Кроме того, если <QuestionComponent/> - единственное, что вы отображаете для васВам также не понадобятся фигурные скобки.Вы можете написать это как

return this.state.isQuestionIDAvailable && <QuestionComponent />

Надеюсь, что это ответы:)