使用 `fetch().json()` 获取数据后，若响应体是一个包含数组字段（如 `lista`）的对象，需通过属性访问（如 `data.lista`）显式提取该数组，才能直接对数组调用 `map()` 等方法。
在实际开发中，尤其是对接模拟 JSON 服务器（如 JSON Server）时，API 响应往往不是“纯数组”，而是一个顶层键值对象——例如返回结构为 { "lista": [ {...}, {...} ] }。此时，connection.json() 解析得到的是一个 JavaScript 对象，而非数组，因此无法直接在其上调用 .map()、.forEach() 或解构赋值等数组方法。
✅ 正确做法是：明确识别并访问响应对象中的目标数组字段。根据你提供的接口地址（https://my-json-server.typicode.com/.../db）及上下文，响应数据的数组实际挂载在 lista 属性下。因此，只需将 setItems(list) 改为 setItems(list.lista) 即可：
async function list() {
try {
const connection = await fetch("https://my-json-server.typicode.com/priscilasilvaalves/priscilasilvaalves.github.io/db");
const data = await connection.json(); // → { lista: [{ id: 1, name: "A" }, { id: 2, name: "B" }] }
setItems(data.lista); // ✅ 提取数组，类型为 Array<object>
} catch (error) {
console.error("Failed to fetch items:", error);
}
}? 小技巧：可在 console.log(data) 后立即展开查看结构，或使用类型守卫增强健壮性：
if (Array.isArray(data.lista)) {
setItems(data.lista);
} else {
console.warn("Expected 'lista' to be an array, got:", data.lista);
setItems([]);
}⚠️ 注意事项：
- 不要假设所有 API 都返回扁平数组；务必检查实际响应结构（推荐使用浏览器 Network 面板或 console.log(JSON.stringify(data, null, 2)) 格式化输出）；
- 若未来接口结构调整（如字段名改为 items 或移除外层包装），需同步更新属性访问路径；
- 在 TypeScript 项目中，建议定义响应接口，提升类型安全：
interface ApiResponse {
lista: { id: number; title: string; /* ... */ }[];
}
// 使用：const data = await connection.json() as ApiResponse;至此，items 状态即为标准数组，可放心用于 items.map(item => <Item key={item.id} {...item} />) 等渲染逻辑。
