如何将 JSON 响应中的嵌套数组提取为纯数组对象

当使用 `fetch().json()` 获取数据时，若 api 返回的是包含数组字段的对象（如 `{ lista: [...] }`），需通过属性访问（如 `data.lista`）提取内部数组，才能直接调用 `map()` 等数组方法。

在使用 fetch 请求 JSON 数据时，response.json() 方法会将响应体解析为一个 JavaScript 对象——但该对象的结构完全取决于后端返回的 JSON 格式。从你提供的示例来看，服务器实际返回的是如下结构：

{
  "lista": [
    { "id": 1, "name": "Item 1" },
    { "id": 2, "name": "Item 2" }
  ]
}

这意味着 connection.json() 得到的是一个顶层对象，而真正的数据数组被包裹在 lista 字段下。因此，直接对 list 调用 list.ma

p(...) 会报错（因为 list 是对象，不是数组），必须先解构出 list.lista。

✅ 正确做法是：

async function list() {
  try {
    const response = await fetch("https://my-json-server.typicode.com/priscilasilvaalves/priscilasilvaalves.github.io/db");
    const data = await response.json();
    // ✅ 关键：访问嵌套属性 'lista'，获取真实数组
    setItems(data.lista || []); // 添加空数组兜底，增强健壮性
  } catch (error) {
    console.error("Failed to fetch items:", error);
  }
}

⚠️ 注意事项：

• 始终校验数据结构：API 可能返回错误格式或缺失字段，建议使用可选链（?.）或逻辑判断（如 data?.lista ?? []）避免运行时错误；
• 类型安全（TypeScript 推荐）：可定义接口明确响应结构，提升开发体验与安全性：

interface ApiResponse {
  lista: { id: number; name: string }[];
}
// 使用时：
const data = await response.json() as ApiResponse;
setItems(data.lista);

• 避免重复日志陷阱：console.log(items) 在 setItems() 后立即执行，由于 setState 是异步的，此时 items 仍为旧值；如需调试，应在 useEffect 中监听 items 变化，或直接 console.log(data.lista)。

总结：JSON 解析后得到的是“原始响应结构的镜像”，不是自动扁平化的数组。理解并适配 API 的实际数据形态，是前端数据处理的关键一步。