如何将 Fetch 返回的嵌套 JSON 对象正确转换为数组对象

当使用 `fetch().json()` 获取数据时，若 api 返回的是一个包含数组字段（如 `{ “lista”: […] }`）的对象，需通过属性访问（如 `data.lista`）提取内部数组，而非直接对整个响应对象调用 `map()`。

在使用 fetch 请求 jsON 数据时，.json() 方法会将响应体解析为一个 javaScript 对象——但该对象的结构完全取决于后端返回的 json 格式。根据你提供的接口（https://my-json-server.typicode.com/…/db），实际响应结构如下：

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

可见，真正的数据数组被包裹在键名为 lista 的属性中。因此，connection.json() 返回的是一个普通对象，而非数组，自然无法直接对其调用 .map() ——这会导致 TypeError: list.map is not a function。

✅ 正确做法是：在解析 JSON 后，显式访问 list.lista（或你接口中对应的实际字段名）来获取目标数组：

async function list() {   try {     const response = await fetch("https://my-json-server.typicode.com/priscilasilvaalves/priscilasilvaalves.github.io/db");     if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);      const data = await response.json();     // ✅ 关键：从嵌套对象中提取数组     setItems(data.lista || []); // 添加空数组兜底，增强健壮性   } catch (error) {     console.error("Failed to fetch items:", error);   } }

? 注意事项：

• 始终检查响应状态（response.ok）和数据结构，避免因网络错误或格式变更导致崩溃；
• 使用可选链（data?.lista）或逻辑或（data.lista || []）防止 undefined 导致运行时错误；
• 若不确定接口结构，可在 console.log(data) 后查看浏览器控制台，确认顶层字段名（如 lista、posts、users 等），再做属性访问；
• 如需复用逻辑，可封装成工具函数：

  const getArrayFromKey = (obj: Record, key: string): T[] =>    Array.isArray(obj[key]) ? obj[key] : []; // 使用：setItems(getArrayFromKey(data, 'lista'));

这样，setItems() 接收的就是标准的数组，后续在组件中即可安全使用 .map() 渲染列表，实现预期的数据流与 ui 绑定。