本文详解如何在 react 中安全获取、解析并结构化展示来自 rest api 的嵌套 json 数据，重点解决状态管理、数据提取与渲染问题。
在 React 应用中处理 JSON 数据（尤其是来自第三方 API 的嵌套响应）时，需兼顾数据获取的异步性、状态更新的响应式特性以及结构化渲染的安全性。你当前的代码存在几个关键问题：直接操作未声明的 datos 数组（非 React state）、未使用 useState 管理状态、未处理加载/错误状态，且 JSON.stringify(datos) 仅用于调试，无法实现结构化展示。
以下是专业、健壮的解决方案：
✅ 正确做法：使用 useState + 解构 + map 渲染
首先，声明一个受控的 state 变量来存储处理后的航班数据：
import { useState, useEffect } from 'react';
function FlightList() {
const [datos, setDatos] = useState([]); // ✅ 使用 useState 初始化空数组
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch(url, options);
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const json = await response.json();
// ✅ 安全解构：检查 success 和 data 是否存在
const { success, data } = json;
if (!success || !data || typeof data !== 'object') {
throw new Error('Invalid API response: missing or malformed data');
}
// ✅ 提取每个日期条目中的 origin/destination/price，并转为扁平数组
const dataList = Object.entries(data).map(([date, flight]) => ({
date, // 可选：保留日期作为标识
origin: flight.origin,
destination: flight.destination,
price: flight.price,
}));
setDatos(dataList);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, []); // ✅ 空依赖数组确保只在挂载时执行
// ✅ 加载与错误状态处理（提升用户体验）
if (loading) return Loading flights...;
if (error) return Error: {error};
return (
{datos.length === 0 ? (
No flights available.
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
下载
) : (
datos.map((flight, index) => (
{flight.origin} → {flight.destination}
Price: €{flight.price}
Date: {flight.date}
))
)}
);
}
export default FlightList;? 关键要点说明
- 状态必须通过 useState 管理：datos.push(...) 直接修改普通数组不会触发重新渲染；React 只响应 setState 调用。
- 避免 JSON.stringify() 渲染：它仅用于调试或序列化，不可读、不语义化，且无法交互。
- 使用 Object.entries() 替代 for...in：更现代、更安全（自动跳过原型链属性），配合 map 返回新数组，符合函数式编程习惯。
- 添加加载/错误边界：真实项目中必须处理网络异常、空响应、字段缺失等场景。
- key 推荐使用唯一标识：如 flight.date 比 index 更可靠（避免列表重排时 DOM 复用问题）。
? 常见错误规避
| 错误写法 | 风险 |
|---|---|
| datos.push(json)（无 useState） | 状态不可追踪，组件不更新 |
| datos.map(...) 但 datos 初始未定义 | 运行时报错 Cannot read property 'map' of undefined |
| 忽略 .catch() 或未设 loading=false | UI 卡在 loading 状态或静默失败 |
| 直接访问 json.data['2023-02-08'].origin | 若日期键动态变化或不存在，会报 undefined.origin 错误 |
掌握这套模式后，你不仅能精准提取 origin/destination/price，还能轻松扩展为显示航班号、航司图标、倒计时等复杂视图。核心原则始终是：解构前校验、状态靠 setState、渲染前判空、体验靠反馈。
