React-native阻止函数异步执行？

Question

单击我的react Native应用程序中的按钮后,我调用两个函数:getSolutionListFromDatabase,它设置组件的状态以包含此解决方案列表,然后updateDatabaseSolutionList,它将一个元素添加到此列表并将其推送回Firebase.但是,尽管在第一个函数中正在更新应用程序的状态,但在第二个函数中,状态被记录为未定义,并且在第一个函数中的某些语句之前调用了该函数的日志语句.这些函数是出于某种原因而异步运行的,这是React native的一个特性吗？如果是这样,如何在设置状态之前阻止第二个函数执行？谢谢.

onSubmitPressed: function() {
    if (this.checkSolution) {
        this.getSolutionListFromDatabase();
        this.updateDatabaseSolutionList();
        Alert.alert(
            'Correct!',
            "Woohoo!"
        );
    }
},

getSolutionListFromDatabase: function() {
    var thisItemRef = itemsListRef.child(this.state.itemID);
    thisItemRef.once('value', (snap) => {
        var solutionList = snap.val();
        this.setState({
            solutionList: solutionList
        });
        console.log('solution is set as' + this.state.solutionList);
    });
},

updateDatabaseSolutionList: function() {
    var newSolutionList = [];
    console.log('solutionList undefined here' + this.state.solutionList);

    if (this.state.solutionList) {
        newSolutionList = this.state.solutionList;
        newSolutionList.push(this.props.itemID);
    }

    //then push new list to Firebase
},

Answer 1

逻辑将始终与您上一个问题的答案相同.如果事件之间存在依赖关系,则应将调用移至第一个回调:

onSubmitPressed: function() {
    if (this.checkSolution) {
        this.getSolutionListFromDatabase();
    }
},

getSolutionListFromDatabase: function() {
    var thisItemRef = itemsListRef.child(this.state.itemID);
    thisItemRef.once('value', (snap) => {
        var solutionList = snap.val();
        this.setState({
            solutionList: solutionList
        });
        console.log('solution is set as' + this.state.solutionList);
        this.updateDatabaseSolutionList();
    });
},

updateDatabaseSolutionList: function() {
    var newSolutionList = [];
    console.log('solutionList undefined here' + this.state.solutionList);

    if (this.state.solutionList) {
        newSolutionList = this.state.solutionList;
        newSolutionList.push(this.props.itemID);
    }

    Alert.alert(
        'Correct!',
        "Woohoo!"
    );
    //then push new list to Firebase
},

如果将先决条件(即solutionList)传递给需要它的函数,而不是使用字段/属性,那么这种类型的流程将更容易为自己关注:

onSubmitPressed: function() {
    if (this.checkSolution) {
        this.getSolutionListFromDatabase();
    }
},

getSolutionListFromDatabase: function() {
    var thisItemRef = itemsListRef.child(this.state.itemID);
    thisItemRef.once('value', (snap) => {
        var solutionList = snap.val();
        this.updateDatabaseSolutionList(solutionList);
    });
},

updateDatabaseSolutionList: function(solutionList) {
    solutionList.push(this.props.itemID);

    Alert.alert(
        'Correct!',
        "Woohoo!"
    );
    //then push new list to Firebase
},

但更好的方法就是将push()新值直接添加到Firebase,而不是先下载整个阵列,然后再添加一个新项目将其发回:

onSubmitPressed: function() {
    if (this.checkSolution) {
        itemsListRef.child(this.state.itemID).push(...);
    }
},