如何解决JavaScript中Cannot read properties of undefined (reading 'length')错误

• 未给AJAX请求配置dataType: 'json'参数：jQuery默认会将接口返回的JSON字符串当作普通文本处理，此时response为字符串类型，不存在data属性，response.data为undefined。将undefined传入buildTable函数后，读取data.length就会触发对应报错。
• 缺少容错逻辑：没有对接口返回数据做合法性校验，一旦接口请求失败、返回结构不符合预期，代码直接读取属性就会抛出异常。

调整代码如下，主要改动包含3部分：

1. 为AJAX请求新增dataType: 'json'配置，告诉jQuery自动将返回的JSON内容解析为JS对象
2. 新增请求成功后的格式校验，只有返回的data字段为数组时才执行后续渲染逻辑
3. 新增AJAX错误捕获和buildTable函数的入参校验，避免异常场景下的报错

//implement css in this files
import './style.css';

//jquery already imported
import $ from 'jquery';
// ajax to load

// do table data binding here using data from variable resultArr
var myArray = []

$.ajax({
    method:'GET',
    url:'https://www.seetrustudio.com/data.php',
    // 新增：指定返回数据类型为JSON，自动解析为JS对象
    dataType: 'json',
    success:function(response){
        // 新增：校验返回数据格式合法性
        if (response && Array.isArray(response.data)) {
            myArray = response.data
            buildTable(myArray)
            console.log(myArray)
        } else {
            console.log('接口返回结构不符合预期，返回内容：', response)
            // 如果接口直接返回数组而非包裹在data字段内，可替换为如下代码
            // if (Array.isArray(response)) {
            //     myArray = response
            //     buildTable(myArray)
            // }
        }
    },
    // 新增：捕获接口请求异常
    error: function(err) {
        console.log('接口请求失败，错误信息：', err)
    }
})
function buildTable(data){
    var table = document.getElementById('myTable')
    // 新增：入参非数组或DOM节点不存在时直接返回，避免报错
    if (!Array.isArray(data) || !table) return

    for (var i = 0; i < data.length; i++){
        var row = `<tr>
                        <td>${data[i].date}</td>
                        <td>${data[i].weather}</td>
                        <td>${data[i].temperature}</td>
                        <td>${data[i].temp_unit}</td>
                  </tr>`
        table.innerHTML += row
    }
}

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