JavaScript数组已填充但单个元素返回undefined问题求助

从数据库获取数据并格式化后，数组已按预期填充，但使用console.log访问单个元素时返回undefined，导致传递给其他组件时显示空白。相关代码如下：

(async function() {
    const asyncFunctions = [supabaseClient.fetchRecommendedTutors('802201628')];
    const results = await Promise.all(asyncFunctions);
    console.log(results);
    console.log(formatData(results));
})();

var tutorsToUse = [];
function formatData(data) {
    console.log(data);
    console.log(data[0]);
    for (var i = 0, len = data[0].length; i < len; i++) {
        const tut = {
            'name' : String(data[0][i].names),
            'specialty' : String(data[0][i].specialty),
            'courses' : [String(data[0][i].course_id)],
            'profile' : "",
            'rating' : Number(data[0][i].tutor_rating)
        };
        tutorsToUse.push(tut)
        console.log(tutorsToUse[0]);
    }
    return tutorsToUse;
}

console.log(tutorsToUse[0]);
console.log(tutorsToUse);

执行console.log(tutorsToUse)能看到预期结果，但console.log(tutorsToUse[0])返回undefined。

核心原因 #

1. 异步代码执行顺序问题：最后两行的console.log在异步函数执行前就已运行——此时tutorsToUse还是空数组，所以tutorsToUse[0]自然是undefined。而浏览器控制台会动态更新数组显示，你看到console.log(tutorsToUse)有内容，是后续异步代码填充数组后控制台才展示了最新状态。
2. 全局变量的时序风险：依赖全局变量tutorsToUse存储异步数据，极易因代码执行时序问题导致数据未就绪就被访问。

修复方案 #

1. 移除全局变量，让formatData返回独立数组 #

不要用全局变量存数据，直接在formatData内部创建数组并返回，避免全局状态混乱。

2. 确保在异步操作完成后再使用数据 #

所有需要用到tutorsToUse的逻辑（比如传递给组件）都要放在异步函数内部，保证数据已被正确格式化。

修改后的代码示例 #

(async function() {
    // 单个异步请求无需Promise.all，直接await即可
    const fetchResult = await supabaseClient.fetchRecommendedTutors('802201628');
    const tutorsToUse = formatData(fetchResult);
    
    // 此时数据已就绪，可正常访问单个元素
    console.log(tutorsToUse[0]);
    console.log(tutorsToUse);
    
    // 在这里把tutorsToUse传递给你的组件，比如设置组件状态或调用更新方法
    // 示例：yourComponent.setTutors(tutorsToUse);
})();

function formatData(data) {
    const tutors = [];
    // 注意：如果原Promise.all返回的results是[[...]]格式，这里要改成data[0].length和data[0][i]
    for (let i = 0, len = data.length; i < len; i++) {
        const tut = {
            name: String(data[i].names),
            specialty: String(data[i].specialty),
            courses: [String(data[i].course_id)],
            profile: "",
            rating: Number(data[i].tutor_rating)
        };
        tutors.push(tut);
    }
    return tutors;
}

关键修改点说明 #

• 去掉全局变量tutorsToUse，formatData内部创建局部数组并返回，避免全局污染和时序问题。
• 单个异步请求无需使用Promise.all，直接await即可（如果是多个请求，再保留Promise.all）。
• 所有依赖tutorsToUse的操作都放在async函数内部，确保数据已完全准备好再执行。
• 如果原fetchRecommendedTutors返回的是嵌套数组（即results是[[...]]），则在formatData里要恢复data[0].length和data[0][i]的写法。

内容的提问来源于stack exchange，提问作者yamil morales