如何处理Cannot read properties of undefined (reading '0')错误？（select onChange的Ajax场景）

错误原因 #

• 初始代码里date_sched是空数组，直接访问date_sched[0].user_id和date_sched[0].dates时，date_sched[0]是undefined，直接读取它的属性就会抛出Cannot read properties of undefined (reading '0')错误。
• doctor_dates变量被注释，highlight函数里使用该变量会引发另一个未定义错误。

修正后的代码实现 #

// 初始化基础变量
var date_sched = [];
let output = {};
let doctor_dates;

// 绑定select的onchange事件（替换#yourSelectId为实际select控件ID）
$("#yourSelectId").on("change", function() {
    const selectedDoctor = $(this).val();
    
    // 发起Ajax请求获取日程数据
    $.ajax({
        url: "你的接口地址", // 替换为实际后端接口地址
        type: "GET", // 按接口要求选择GET/POST
        data: { doctorId: selectedDoctor }, // 传递选中的医生ID等参数
        success: function(response) {
            date_sched = response;
            
            // 确保数据存在再处理
            if (date_sched.length > 0) {
                doctor_dates = date_sched[0].user_id;
                output = {
                    [doctor_dates]: date_sched[0].dates,
                };
                
                // 触发日期选择器更新，自动调用高亮逻辑
                $("#schedDay").datetimepicker("update");
            }
        },
        error: function(xhr) {
            console.error("日程数据请求失败:", xhr);
        }
    });
});

// 日期选择器事件绑定
$("#schedDay").on("show.datetimepicker update.datetimepicker", function() {
    highlight();
});

function highlight() {
    // 无数据时直接返回，避免报错
    if (Object.keys(output).length === 0) return;
    
    const dayElements = $("#schedDay").find(".day").toArray();
    for (let i = 0; i < dayElements.length; i++) {
        const currentDay = dayElements[i].getAttribute("data-day");
        // 用可选链操作符避免数组不存在时报错
        if (output[doctor_dates]?.indexOf(currentDay) > -1) {
            dayElements[i].classList.add('highlighted');
        } else {
            // 切换数据后移除旧高亮
            dayElements[i].classList.remove('highlighted');
        }
    }
}

核心修改说明 #

• 把output的初始化逻辑移到Ajax成功回调里，确保date_sched已经拿到后端数据后再访问数组元素。
• 取消doctor_dates的注释，在Ajax成功时赋值，保证highlight函数能正常使用该变量。
• 在highlight函数里增加空值判断：用output[doctor_dates]?.indexOf(currentDay)的可选链操作符避免数组不存在时报错；同时判断output是否为空，提前终止函数。
• Ajax成功后调用$("#schedDay").datetimepicker("update")，触发日期选择器的update事件，自动调用highlight完成日期高亮。
• 增加Ajax错误处理，方便调试请求失败的情况。

内容的提问来源于stack exchange，提问作者Sharmae Reyes