Javascript 使React等待Firebase查询结束

我正在给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}/>
    }
}

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

令人困惑的是，它们像异步一样被记录。如何使其同步/等待Firebase的响应返回

this.props.match.params.id

是来自上一个组件的id。这个人表现得很好

令人困惑的是，它们像异步一样被记录。如何使其同步/等待Firebase的响应返回

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

您可以将变量附加到此类，默认情况下，该类为

false

。收到响应后，可以将该变量设置为

true

例如—

this.state.isQuestionIDAvailable=false;

在您的firebase响应中，（使用时一定要注意

此
的范围）

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

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

{this.state.isQuestionIDAvailable&&}

另外，如果
是您渲染的唯一对象，那么您也不需要花括号。你可以这样写

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

返回this.state.isQuestionIDAvailable&&

希望答案是：）
我认为需要更清晰的解释。另外，由于您的函数是
async
，您的所有响应不是都是异步的吗？我使用
async
来使用
wait
标志。请让我知道我应该提供的附加信息。您希望在firebase获取信息时加载您的组件吗？我的意思是，将调用转换为同步调用的真正目的是什么。另外，由于有
wait
功能，您的响应将始终是
async
Yes。我希望查询获取信息，然后呈现
问题
组件。我怎样才能让渲染方法等待查询结束呢？非常感谢！我从没想过要这样使用它
{this.state.isQuestionIDAvailable && <QuestionComponent />}

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