Javascript firebase数据库调用中的数组记录了正确的数据，但长度显示为0

我正在调用数据库，从一个数组中获取每个地图项目，并将它们存储在我返回的数组中。如果我登录到控制台，数组将显示正确的数据，但当我尝试引用任何数据时，数组似乎为空，并且数组的长度也为零

$(document).ready(function(){
    //This ('click','li') binds all dynamically added shit to respond to click.
    $('ul.hiddentext').on('click','li', function(e){
        $(this).siblings().css('font-weight','normal');
        $(this).css('font-weight','bolder');
        let text = $(this).text();
        currentWorkoutSelected = text;
        var exercises = pullWorkoutTableData(text)
        console.log(exercises.length);
        var workout = new workoutTemplate(text, user, exercises);
        workout.populateTable();

        //Populate the title of the workout based on if its already there or not.
        if($('h4#workoutTitle').length == 0){
            $("table.exerciseList").prepend('<h4 id="workoutTitle">'+ text+ '</h4>');
        }
        else{
            $('h4#workoutTitle').replaceWith('<h4 id="workoutTitle">'+ text+ '</h4>');
        };
    });
});

//Taking the data needed for the workout table from the database.
function pullWorkoutTableData(workoutName){
    var exerciseList = [];
    db.collection('workouts').get().then((snapshot)=>{
        snapshot.docs.forEach(doc => {
            if(doc.data().name === workoutName && doc.data().user.includes(user)){
                doc.data().exercises.forEach(element =>{
                    var exercise = [element.name, element.weight, element.reps];
                    exerciseList.push(exercise);
                });
            };
        });
    });
    console.log(exerciseList);
    this.setState({exerciseList});
    return exerciseList;
};

---

希望能够调用populateTable函数，但由于数组为空，对象未正确创建。

问题是db。collection返回一个承诺，并且在您记录它时数据还不可用

您可以在这里尝试以下几种方法：

如果您只关心React状态，请将设置的状态移动到侦听器中

function pullWorkoutTableData(workoutName){
    var exerciseList = [];
    db.collection('workouts').get().then((snapshot)=>{
        snapshot.docs.forEach(doc => {
            if(doc.data().name === workoutName && doc.data().user.includes(user)){
                doc.data().exercises.forEach(element =>{
                    var exercise = [element.name, element.weight, element.reps];
                    exerciseList.push(exercise);
                });
            };
        });
        this.setState({exerciseList}); // <---- HERE
    });

    return exerciseList;
};

您可以做的另一件事是使用async/await函数，但对于您的情况，更新状态可能就足够了：

如果您的浏览器支持它

function pullWorkoutTableData(workoutName){
    var exerciseList = [];
    return db.collection('workouts').get().then((snapshot)=>{
        snapshot.docs.forEach(doc => {
            if(doc.data().name === workoutName && doc.data().user.includes(user)){
                doc.data().exercises.forEach(element =>{
                    var exercise = [element.name, element.weight, element.reps];
                    exerciseList.push(exercise);
                });
            };
        });
        return Promise.resolve({ exerciseList })
    });
};
$(document).ready(async function(){
    //This ('click','li') binds all dynamically added shit to respond to click.
    $('ul.hiddentext').on('click','li', function(e){
        $(this).siblings().css('font-weight','normal');
        $(this).css('font-weight','bolder');
        let text = $(this).text();
        currentWorkoutSelected = text;
        var { exerciseList: exercises } = await pullWorkoutTableData(text)
        console.log(exercises.length);
        var workout = new workoutTemplate(text, user, exercises);
        workout.populateTable();

        //Populate the title of the workout based on if its already there or not.
        if($('h4#workoutTitle').length == 0){
            $("table.exerciseList").prepend('<h4 id="workoutTitle">'+ text+ '</h4>');
        }
        else{
            $('h4#workoutTitle').replaceWith('<h4 id="workoutTitle">'+ text+ '</h4>');
        };
    });
});

---

非常感谢你！我对javascript相当陌生，所以这对我来说是全新的领域！但我相信最重要的答案就是我想要的！是的。第二个选择也对我有用！我不小心在我的问题中有代码，使它看起来像我在一个react项目中工作，但它实际上只是原生JS。