React应用中如何动态访问API返回的不同字段货币数据

你的核心需求是忽略外层的货币代码字段（如USD/HRK），直接提取内部的name和symbol，因为每个currency对象里始终只有一组货币数据，用Object.values()就能轻松解决：

基础实现示例 #

假设你已经从API拿到了数据，在React组件里可以这么写：

function CurrencyCard({ data }) {
  // 把currency对象的值转成数组，取第一个元素就是目标数据
  const currencyInfo = Object.values(data.currency)[0];

  // 处理数据为空的边界情况，避免页面报错
  if (!currencyInfo) {
    return <div>暂无可用货币信息</div>;
  }

  return (
    <div className="currency-card">
      <h3>{currencyInfo.name}</h3>
      <p>符号: {currencyInfo.symbol}</p>
    </div>
  );
}

// 组件使用示例
function App() {
  // 模拟API返回的克罗地亚货币数据
  const apiData = {
    currency: {
      HRK: {
        name: "Croatian kuna",
        symbol: "kn"
      }
    }
  };

  return <CurrencyCard data={apiData} />;
}

扩展：支持多组货币数据 #

如果后续API可能返回多个货币的情况，直接用map遍历数组即可：

function CurrencyList({ data }) {
  const currencyList = Object.values(data.currency);

  if (currencyList.length === 0) {
    return <div>暂无货币数据</div>;
  }

  return (
    <div className="currency-list">
      {currencyList.map((item, idx) => (
        <div key={idx} className="currency-item">
          <p>名称: {item.name}</p>
          <p>符号: {item.symbol}</p>
        </div>
      ))}
    </div>
  );
}

关键说明 #

• Object.values(obj)会将对象的所有值提取为数组，不管外层键名是什么，都能直接拿到内部的货币详情。
• 一定要加空值判断，防止API返回格式异常（比如currency为空对象）导致组件崩溃。

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