fetch请求报TypeError：无法读取undefined的map属性，如何修复？

错误原因分析 #

• 错误1：错误获取返回数据：你调用的https://jsonplaceholder.typicode.com/users接口直接返回的是用户数组，并不是包含data属性的对象。代码里usuarios = users.data会让usuarios变成undefined，自然无法调用map()方法。
• 错误2：用户字段名称不匹配：该接口返回的用户对象中没有first_name和last_name字段，对应的正确字段是name。

修复后的代码 #

var div_usuarios = document.querySelector('#usuarios');
var usuarios = [];

fetch('https://jsonplaceholder.typicode.com/users')
    .then(data => data.json())
    .then(users => {
        usuarios = users; // 直接赋值返回的数组
        console.log(usuarios);

        usuarios.map((user, i) => {
            let nombre = document.createElement('h2');
            nombre.innerHTML = `${i + 1}. ${user.name}`; // 使用正确的name字段，优化格式
            div_usuarios.appendChild(nombre);
        });
    })
    .catch(error => {
        // 新增错误捕获，处理请求失败情况
        console.error('请求用户数据失败:', error);
        div_usuarios.innerHTML = '<p>加载用户数据失败</p>';
    });

关键修改点 #

• 把usuarios = users.data改为usuarios = users，直接使用接口返回的数组。
• 将user.first_name和user.last_name替换为user.name，匹配接口返回的字段结构。
• 新增catch()方法捕获请求过程中的错误，避免未处理的Promise异常，同时给用户展示错误提示。
• 优化了标题的显示格式，给索引加1让序号从1开始，更符合阅读习惯。

内容的提问来源于stack exchange，提问作者Javier Delgado Chacon