javascript - 让 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

由于某种原因，代码似乎运行了两次。该 id 是来自前一个组件的 id。最后3个是来自数据库的。

令人困惑的部分是它们以异步方式记录。如何使其同步/等待 Firebase 的响应返回？

this.props.match.params.id 是来自先前组件的 ID。这个表现还不错。

Answer 1

The confusing part is that they get logged async-like. How can I make it synchronous/wait for the response from Firebase to come back?

有一种方法可以让它看起来同步。

您可以将变量附加到此类，默认情况下为 false 。一旦收到响应，您可以将该变量设置为 true .

例如 -

this.state.isQuestionIDAvailable=false;

在您的 firebase 响应中，(使用时请注意 this 的范围)

this.setState({
    isQuestionIDAvailable: true
 });

然后您可以将条件附加到您的组件，例如 -

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

此外，如果 <QuestionComponent/>是您正在渲染的唯一内容，您也不需要花括号。您可以将其写为

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

希望这个答案:)