如何从 Fetch 响应中正确提取 JSON 数组（而非嵌套对象）

当使用 `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 结构。理解并适配服务端返回的数据形状，是前端数据处理的第一步。