本文详解在 react 中安全获取、结构化处理及渲染 json 格式的 api 响应数据，重点解决嵌套对象提取、状态更新和条件渲染等常见问题。
在 React 中处理来自 RESTful API 的 JSON 数据时，需严格遵循 React 的响应式原则：不可直接修改原始状态数组（如 datos.push()），而必须通过 useState 的 setter 函数（如 setDatos()）触发重渲染。原代码中 datos.push(json) 不仅绕过状态更新机制，还会导致组件无法响应式更新，且未处理 json.data 的深层嵌套结构（日期为键名的对象）。
以下是优化后的完整实践方案：
✅ 正确的数据获取与结构化处理
首先，使用 useState 初始化空数组，并在 useEffect 中发起请求：
const [datos, setDatos] = useState<Array<{ origin: string; destination: string; price: number }>>([]);在 .then() 中解构响应体，安全提取 data 并遍历其每个日期键（2023-02-08 等），构造扁平化的航班信息数组：
useEffect(() => {
fetch(url, options)
.then((res) => {
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
return res.json();
})
.then((json) => {
const { success, data } = json;
if (!success || !data) {
console.warn('API returned failure or empty data');
setDatos([]);
return;
}
// 将 { "2023-02-08": { ... }, "2023-02-09": { ... } } → [{origin, destination, price}, ...]
const dataList = Object.entries(data).map(([_, flight]) => ({
origin: flight.origin,
destination: flight.destination,
price: flight.price,
}));
setDatos(dataList);
})
.catch((err) => {
console.error('Failed to fetch flight data:', err);
// 可选：设置错误状态或展示用户友好提示
});
}, []);? 关键改进点： 使用 Object.entries(data).map() 替代 for...in，更函数式、更安全（避免原型链污染）； 显式类型标注增强可维护性； 添加 HTTP 状态校验与 success 字段判断，提升健壮性； 使用 _ 忽略无用的日期键名（我们只关心值）。
✅ 安全渲染：避免空数组报错
在 JSX 中渲染前务必检查数组长度，防止 map() 在 undefined 或空数组上出错：
<div className="ejemplo">
{datos.length === 0 ? (
<p>Loading flights or no data available...</p>
) : (
datos.map((flight, index) => (
<div key={index} className="flight-card">
<strong>From:</strong> {flight.origin}
<strong>To:</strong> {flight.destination}
<strong>Price:</strong> €{flight.price}
</div>
))
)}
</div>⚠️ 重要提醒：
- 每个列表项必须有唯一 key —— 若 flight 含唯一 ID（如 flight_number），优先使用它代替 index，避免重排时 UI 异常；
- 避免直接 JSON.stringify(datos) 调试，应使用
{JSON.stringify(datos, null, 2)}提升可读性；- 生产环境建议封装 fetch 逻辑为自定义 Hook（如 useFlightData），实现复用与错误边界统一处理。
通过以上方式，你不仅能精准提取 origin、destination 和 price 字段，还能构建出可扩展、易测试、符合 React 最佳实践的数据流。
