如何在 React 项目中正确获取并渲染 API 返回的 JSON 对象-js教程-PHP中文网

本文详解 React 中使用 fetch 获取远程 JSON 数据后，如何正确结构化状态、避免常见渲染错误，并支持直接按对象属性渲染（而非强制转为扁平数组）。

本文详解 react 中使用 `fetch` 获取远程 json 数据后，如何正确结构化状态、避免常见渲染错误，并支持直接按对象属性渲染（而非强制转为扁平数组）。

在 React 中调用外部 API（如 https://ipinfo.io/json）获取用户地理位置信息时，一个常见误区是将响应字段（如 city 和 country）直接以字符串形式推入数组，却在 JSX 中仍按对象属性方式访问（如 records.city），导致渲染失败（undefined 或白屏）。根本原因在于：状态数据的结构必须与渲染逻辑严格匹配。

你原始代码中：

arr.push(jsonResponse.city, jsonResponse.country); // → arr = ["Tokyo", "JP"]
setRecords(arr);

此时 record 是一个字符串数组 ["Tokyo", "JP"]，但后续 map 中却尝试访问 records.city —— 字符串没有 city 属性，自然无法渲染。

✅ 正确做法是：保持数据语义化，将 JSON 响应的关键字段封装为对象，并存入数组（即使仅一条记录）。这样既符合直觉，也便于扩展（例如未来展示多条记录）：

import React, { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";

export default function ApiComponent() {
  const [records, setRecords] = useState([]); // 推荐使用语义化变量名

  useEffect(() => {
    fetch("https://ipinfo.io/json?token=93ogbcdhee0a74")
      .then((response) => {
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        return response.json();
      })
      .then((jsonResponse) => {
        // ✅ 正确：构造对象并推入数组（支持单条/多条统一处理）
        const recordObj = {
          city: jsonResponse.city || "Unknown",
          country: jsonResponse.country || "Unknown",
          region: jsonResponse.region || "",
          ip: jsonResponse.ip || ""
        };
        setRecords([recordObj]); // 直接设为单元素数组，无需手动 push + set
      })
      .catch((error) => {
        console.error("Failed to fetch location data:", error);
        setRecords([]); // 错误时清空或设默认值
      });
  }, []);

  return (
    <div>
      {records.length > 0 ? (
        records.map((record) => (
          <div key="{uuidv4()}">
            <p><strong>City:</strong> {record.city}</p>
            <p><strong>Country:</strong> {record.country}</p>
            <p><strong>Region:</strong> {record.region}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Json Repair Kit" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit" class="overflowclass">Json Repair Kit</a>
													<p class="overflowclass">使用 Node.js 评估修复格式错误的 JSON，自动纠正尾随逗号、单引号、未加引号的键等常见问题，实现文件规范化。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9881" title="Json Repair Kit" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
            <p><strong>IP:</strong> {record.ip}</p>
          </div>
        ))
      ) : (
        <p>Loading location data...</p>
      )}
    </div>
  );
}

? 关键改进点说明：

结构一致性：records 始终是对象数组（如 [ { city: "...", country: "..." } ]），确保 record.city 访问安全；
错误防护：添加 response.ok 检查和 try/catch（或 .catch()）处理网络/解析异常；
空值容错：对可能缺失的字段（如 jsonResponse.city）提供默认值（|| "Unknown"），避免 undefined 渲染；
性能优化：直接 setRecords([obj]) 替代 arr.push(...); setRecords(arr)，避免闭包中引用过期数组；
可扩展性：若未来需批量请求或合并多条记录，当前结构天然支持 map 和后续增删操作。

? 额外建议：

若仅需渲染单个对象（非列表），可将状态设为 useState(null)，直接存储对象而非数组，渲染时用 {record &&
{record.city}
}；
生产环境请将 API Token 移至服务端代理，避免前端硬编码密钥；
考虑使用 useSWR 或 React Query 管理数据请求，自动处理加载、错误、缓存等逻辑。

遵循以上模式，即可稳健、清晰地在 React 项目中获取并展示任意结构的 JSON 数据。