React项目API获取JSON对象无法渲染及非数组展示方案咨询

一、页面无法渲染的原因 #

1. 数组元素类型不匹配：你把jsonResponse.city、jsonResponse.country直接push到数组后，数组里存的是字符串（比如["广州", "CN"]），但map遍历的时候却尝试访问records.city——字符串没有city属性，最终渲染内容为undefined，页面自然看不到有效内容。
2. JSX语法错误：代码里的<p>{records.city + "+ "} 未闭合</p>标签，会触发React渲染报错。
3. 不必要的外部变量：var arr = []声明在组件顶层，每次组件渲染都会重新创建，虽然当前场景不会出问题，但更规范的做法是在回调内部创建数组。

二、直接展示JSON对象的优化代码 #

不需要转数组，直接将API返回的JSON对象存入state，按需渲染对应属性即可：

import React, { useEffect, useState } from "react";

export default function Aapi() {
  // 初始化为null，存API返回的JSON对象
  const [ipInfo, setIpInfo] = useState(null);

  useEffect(() => {
    fetch("https://ipinfo.io/json?token=93ogbcdhee0a74")
      .then((response) => response.json())
      .then((jsonResponse) => {
        setIpInfo(jsonResponse);
      })
      .catch(err => console.error('请求失败:', err)); // 增加错误捕获
  }, []);

  // 未获取到数据时加载提示
  if (!ipInfo) {
    return <p>加载中...</p>;
  }

  // 直接渲染JSON对象的属性
  return (
    <div>
      <p>城市：{ipInfo.city}</p>
      <p>国家：{ipInfo.country}</p>
      <p>IP地址：{ipInfo.ip}</p>
      {/* 可按需添加其他需要展示的字段 */}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者MaCS