React请求JSON数据页面空白问题排查求助（附代码）

核心问题 #

你调用的https://economia.awesomeapi.com.br/json/last/USD-BRL接口返回的是对象类型数据，而非数组，但你初始化的posts是数组，并且尝试用数组的map方法遍历对象——对象没有map方法，这直接导致渲染失败，页面空白。

该接口返回的结构大致如下：

{
  "USDBRL": {
    "code": "USD",
    "codein": "BRL",
    "name": "Dólar Americano/Real Brasileiro",
    "high": "5.2589",
    "low": "5.2031",
    "varBid": "-0.0136",
    "pctChange": "-0.26",
    "bid": "5.2204",
    "ask": "5.2214",
    "timestamp": "1718924399",
    "create_date": "2024-06-20 17:59:59"
  }
}

而能正常显示的https://api.covid19api.com/countries返回的是数组类型，所以map方法可以正常工作，这就是两个接口表现不同的原因。

修复方案 #

方案1：将对象转为数组后遍历 #

调整初始状态为对象，通过Object.values()把对象转为数组，再用map遍历：

import { useEffect, useState } from 'react';
import axios from 'axios'
import './App.css';
import React from 'react';

function App() {
    // 初始化为空对象
    const [posts, setPosts] = useState({})

    useEffect(() => {
      axios.get("https://economia.awesomeapi.com.br/json/last/USD-BRL")
      .then((response) => {
        console.log("ok")
        console.log(response.data)
        setPosts(response.data)
      }).catch(() => {
        console.log("erro")
      })
  }, [])

  return (
    <div>
      {/* 将对象转为数组后执行map */}
      {Object.values(posts)?.map((post, key) =>{
      return(  
      <div key={key}>
        <span></span>
        <span>Dolar</span>
        <span>{post.bid}</span>
        <span>{post.create_date}</span>
      </div>)
    })}
  );
}

export default App;

方案2：直接提取目标数据 #

如果只需要USD-BRL的汇率数据，可以直接提取对象中的USDBRL字段存入状态：

import { useEffect, useState } from 'react';
import axios from 'axios'
import './App.css';
import React from 'react';

function App() {
    // 初始化为null或空对象
    const [post, setPost] = useState(null)

    useEffect(() => {
      axios.get("https://economia.awesomeapi.com.br/json/last/USD-BRL")
      .then((response) => {
        console.log("ok")
        console.log(response.data)
        // 直接提取目标数据
        setPost(response.data.USDBRL)
      }).catch(() => {
        console.log("erro")
      })
  }, [])

  return (
    <div>
      {/* 数据存在时再渲染 */}
      {post && (
        <div>
          <span></span>
          <span>Dolar</span>
          <span>{post.bid}</span>
          <span>{post.create_date}</span>
        </div>
      )}
    </div>
  );
}

export default App;

额外提示 #

• 你代码中直接使用<td>标签，但未包裹在<table>、<tr>结构内，不符合HTML规范，建议替换为<span>、<div>等合适标签，或者补全表格结构。
• 后续对接接口时，务必先确认返回数据的类型（数组/对象），再选择对应的遍历或渲染逻辑，这是你之前遇到类似问题的核心原因。

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