如何在 React 中正确解析与渲染 JSON API 数据

本文详解在 react 中安全获取、结构化处理及渲染 json 格式的 api 响应数据，重点解决嵌套对象提取、状态更新和条件渲染等常见问题。

在 React 中处理来自 RESTful API 的 JSON 数据时，需严格遵循 React 的响应式原则：不可直接修改原始状态数组（如 datos.push()），而必须通过 useState 的 setter 函数（如 setDatos()）触发重渲染。原代码中 datos.push(json) 不仅绕过状态更新机制，还会导致组件无法响应式更新，且未处理 json.data 的深层嵌套结构（日期为键名的对象）。

以下是优化后的完整实践方案：

✅ 正确的数据获取与结构化处理

首先，使用 useState 初始化空数组，并在 useEffect 中发起请求：

const [datos, setDatos] = useState>([]);

在 .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 或空数组上出错：

聚蜂消防BeesFPD

关注消防领域的智慧云平台

下载

  {datos.length === 0 ? (
    
Loading flights or no data available...
  ) : (
    datos.map((flight, index) => (
      

        From: {flight.origin}  
        To: {flight.destination}  
        Price: €{flight.price}
      
    ))
  )}

⚠️ 重要提醒：

• 每个列表项必须有唯一 key —— 若 flight 含唯一 ID（如 flight_number），优先使用它代替 index，避免重排时 UI 异常；
• 避免直接 JSON.stringify(datos) 调试，应使用

  {JSON.stringify(datos, null, 2)}

  提升可读性；
• 生产环境建议封装 fetch 逻辑为自定义 Hook（如 useFlightData），实现复用与错误边界统一处理。

通过以上方式，你不仅能精准提取 origin、destination 和 price 字段，还能构建出可扩展、易测试、符合 React 最佳实践的数据流。