Uncaught TypeError: Cannot read properties of undefined (reading 'Hobbies')排查

错误核心出在buildSlides函数的循环条件配置错误：

• 数组下标从0开始计数，有效取值范围为0 ~ slideData.length - 1
• 你写的for(i=0;i<=slideData.length;i++)会在最后一次循环时访问slideData[slideData.length]，该位置没有对应元素，值为undefined，读取undefined.Hobbies就会抛出属性读取错误
• 前几次循环都能正常获取属性、生成HTML，所以你会看到页面功能正常，只有最后一次循环触发报错

把循环条件改成i < slideData.length即可，另外还有两个优化点可同步调整：

1. 循环内不需要每次都给DOM赋值，拼接完所有内容后再一次性更新DOM，可减少页面重绘提升性能
2. 不推荐使用async: false的同步请求，会阻塞浏览器主线程，建议改为异步回调的写法

修复后代码 #

function getSlideData(callback) {
    var query = "$expand=AttachmentFiles&$select=Title,Team,State,Location,Hobbies,Favorite,Askme,GreatPlace,imageFact,ImageText,Attachments,AttachmentFiles&$expand=AttachmentFiles&$top=1000&$orderby=Created desc&$filter=Display eq 'Active'";
    var svcUrl = SITE_URL + "_api/web/lists/getbytitle('"+LIST_NAME+"')/items?"+query;

    $.ajax({
        url: svcUrl,
        type: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: function (data) {
            callback(data.d.results);
        },
        error: function (xhr) {
            alert("Can't get list items.", xhr.status + ": " + xhr.statusText); 
        }
    });
}

function buildSlides() {
    getSlideData(function(slideData) {
        var sliderWrapper = $('#slider-wrapper');
        var sliderWrapperContent = "";
        // 修正循环条件
        for(var i=0; i < slideData.length; i++) {
            sliderWrapperContent += '<div><h2>'+slideData[i].Hobbies+'</h2></div>';
        }
        // 循环结束后一次性更新DOM
        sliderWrapper.html(sliderWrapperContent);
    });
}

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