当使用 `fetch().json()` 获取数据时，若 api 返回的是一个包含数组字段的对象（如 `{ lista: [...] }`），需通过属性访问（如 `data.lista`）显式提取内部数组，才能直接对数组调用 `map()` 等方法。
在使用 fetch 请求 JSON 数据时，一个常见误区是认为 response.json() 总会返回一个纯数组。实际上，它返回的是服务器响应体解析后的原始 JavaScript 值——可能是对象、数组、字符串或基本类型。在你的案例中，JSON Server 返回的结构为：
{
"lista": [
{ "id": 1, "name": "Item 1" },
{ "id": 2, "name": "Item 2" }
]
}因此，await connection.json() 得到的是一个对象 { lista: [...] }，而非可直接遍历的数组。此时若直接对 list 调用 .map()，会报错：TypeError: list.map is not a function。
✅ 正确做法是明确访问目标数组字段：
async function list() {
try {
const response = await fetch("https://my-json-server.typicode.com/priscilasilvaalves/priscilasilvaalves.github.io/db");
const data = await response.json();
// ✅ 提取嵌套数组：data.lista
setItems(data.lista || []); // 添加空数组兜底，增强健壮性
console.log(data.lista); // 现在输出的是真正的数组
} catch (error) {
console.error("Failed to fetch items:", error);
}
}? 关键注意事项：
- 始终检查响应结构：可通过 console.log(data) 或浏览器 Network 面板查看实际返回的 JSON 格式；
- 添加空值保护：使用 data.lista || [] 避免因字段缺失导致运行时错误；
- 若字段名不确定或动态，可用 Object.values(data)[0]（仅当确定唯一数组字段时谨慎使用），但显式属性访问更清晰、安全、可维护；
- 在 React 中，确保 setItems 触发重渲染后，组件内可安全使用 items.map(...)。
总结：json() 不“自动扁平化”数据——它忠实还原 JSON 结构。理解并适配服务端返回的数据形状，是前端数据处理的第一步。
