React中用Axios调用Alpha Vantage API后映射股票数据为数组

嘿，我来帮你搞定这个数据映射的问题～首先得明确Alpha Vantage返回的Stock Quotes数据结构特点：它的字段都是带编号前缀的（比如"1. symbol"），所以我们要做的就是在map的时候把这些字段重命名成你需要的格式，同时处理好数据类型。

先确认原始数据结构 #

根据你提到的console.log(res.data['Stock Quotes'])，它应该是一个数组，每个元素大概长这样：

{
"1. symbol": "AAPL",
"2. price": "190.50",
"3. volume": "54321000",
"4. timestamp": "2024-05-20 16:00:00"
}

核心映射代码 #

直接用数组的map方法遍历原始数据，重命名字段并转换类型：

// 假设res是Axios请求成功后的响应对象
const rawStockQuotes = res.data['Stock Quotes'] || []; // 兜底处理，避免数组不存在报错

const stocks = rawStockQuotes.map(quote => ({
  symbol: quote['1. symbol'],
  // 把字符串价格转成浮点数，方便后续展示或计算
  price: parseFloat(quote['2. price']),
  // 成交量转成整数，注意加第二个参数10表示十进制
  volume: parseInt(quote['3. volume'], 10),
  timestamp: quote['4. timestamp']
}));

额外的健壮性优化 #

如果API返回的某些字段可能为空或者格式异常，建议加上默认值，避免出现NaN：

const stocks = rawStockQuotes.map(quote => ({
  symbol: quote['1. symbol'] || 'N/A',
  price: parseFloat(quote['2. price']) || 0,
  volume: parseInt(quote['3. volume'], 10) || 0,
  timestamp: quote['4. timestamp'] || '无数据'
}));

这样处理后，stocks数组里的每个对象就完全符合你需要的结构了，直接用来生成列表项就没问题啦～

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