React/JSX中如何遍历Bitpanda API数据并展示？

架构老林

2026-8-19

解决Bitpanda API数据遍历问题

为什么会出现`data.map is not a function`？

Bitpanda的/v1/ticker接口返回的是对象类型的数据（以币种代码如BTC、ETH作为键），而map是数组的专属方法，对象无法调用这个方法，所以会触发报错。

正确遍历对象数据的方法

你已经注意到可以用Object.keys(data)获取键值，这里提供两种实用的遍历实现方式：

方法1：用`Object.entries()`直接获取键值对数组

Object.entries(data)会把对象转换成[币种代码, 价格数据]格式的数组，直接用map遍历即可：

import MyComponents from './MyComponents';
import useFetch from 'react-fetch-hook';
import { useState } from 'react';

function App() {
  
  const {isLoading, error, data} = useFetch("https://api.bitpanda.com/v1/ticker");
  
  if(isLoading) return (<div>is loading .. .. ..</div>);
  if(error) return(<div>an error occurred .. .. </div>); 
  
  return (
    <div className="App">
      <MyComponents />
      
      <h3>on bitpanda</h3>
      <h2>Coin Prices</h2>

      {/* 遍历所有币种数据生成卡片 */}
      <div className="coin-cards">
        {Object.entries(data).map(([coinSymbol, coinData]) => (
          <div key={coinSymbol} className="card">
            <h4>{coinSymbol}</h4>
            <p>EUR Price: {coinData.EUR}</p>
            <p>USD Price: {coinData.USD}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

方法2：用`Object.keys()`获取币种键再遍历

如果只想先拿到币种代码，再通过键去取对应数据，可以用这种方式：

<div className="coin-cards">
  {Object.keys(data).map(coinSymbol => {
    const coinData = data[coinSymbol];
    return (
      <div key={coinSymbol} className="card">
        <h4>{coinSymbol}</h4>
        <p>EUR Price: {coinData.EUR}</p>
      </div>
    );
  })}
</div>