如何拆分Axios GET请求返回的对象数组？

嘿，我看你已经走对路啦！你现在通过Object.keys()遍历API返回的对象来渲染每个加密货币信息，这本身是完全可行的。不过从你的描述来看，你可能更希望把这些数据转换成数组形式，让每个加密货币作为独立的对象存在，这样后续不管是单独调用某条数据，还是做排序、过滤这类操作都会更灵活。

先理清楚当前的情况：你调用的API返回的并不是数组，而是一个以加密货币代码（比如BTC、ETH）为键的对象，结构大概是这样：

{
  BTC: { EUR: 25000, CHANGE: 2.5 },
  ETH: { EUR: 1500, CHANGE: -1.2 },
  // ...其他货币数据
}

方案1：转换为数组（推荐，更灵活） #

在处理Axios响应的时候，我们可以把这个对象转换成数组，每个元素包含货币代码和对应的价格、涨跌数据：

componentDidMount() {
  axios
    .get(
      "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx"
    )
    .then(res => {
      // 使用Object.entries把对象转为[key, value]数组，再映射成我们需要的结构
      const cryptosArray = Object.entries(res.data).map(([symbol, data]) => ({
        symbol, // 货币代码，比如BTC
        eurPrice: data.EUR, // 欧元价格
        change: data.CHANGE // 涨跌幅
      }));
      this.setState({ cryptos: cryptosArray });
    });
}

然后修改渲染部分，现在this.state.cryptos是数组了，直接遍历即可，记得加上React要求的key属性（这是React列表渲染的最佳实践，能避免性能警告）：

render() {
  return (
    <div className="test">
      {this.state.cryptos.map(crypto => (
        <div key={crypto.symbol} id="crypto-container">
          <span className="left">{crypto.symbol}</span>
          <span className="right">
            <NumberFormat 
              value={crypto.eurPrice} 
              displayType={"text"} 
              decimalPrecision={2} 
              thousandSeparator={true} 
              prefix={"€"} 
            />
          </span>
          {/* 要是需要显示涨跌幅，直接用crypto.change就行 */}
          <span className="change">{crypto.change}%</span>
        </div>
      ))}
    </div>
  );
}

这样处理后，你想单独使用某条数据就很方便了，比如要拿ETH的价格：

const ethData = this.state.cryptos.find(c => c.symbol === 'ETH');
console.log(ethData?.eurPrice);

方案2：保留原对象结构（适合简单场景） #

如果只是想单独访问某个货币的数据，其实不用转换数组，直接通过键名获取就行：

// 比如获取BTC的欧元价格
console.log(this.state.cryptos.BTC.EUR);

这种方式适合不需要批量操作数据的简单场景，你的原代码其实已经支持这种用法啦。

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