当使用 `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.map(...) 会报错（因为 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 的实际数据形态，是前端数据处理的关键一步。
