当使用 `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 = <T>(obj: Record<string, any>, key: string): T[] => Array.isArray(obj[key]) ? obj[key] : []; // 使用：setItems(getArrayFromKey(data, 'lista'));
这样，setItems() 接收的就是标准的数组，后续在组件中即可安全使用 .map() 渲染列表，实现预期的数据流与 UI 绑定。
