axios如何分离获取数组对象答案

【问题标题】：How to separate axios get array objectsaxios如何分离获取数组对象
【发布时间】：2019-09-17 20:18:11
【问题描述】：

您好，我做了一个简单的 AXIOS 获取请求并接收对象数组。但是我用来实现此目的的示例将所有数组同时返回，并且我需要将对象分开，以便我可以分别使用它们中的每一个。

class apitest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      cryptos: []
    };
  }

  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 => {
        const cryptos = res.data;
        console.log(cryptos);
        this.setState({ cryptos: cryptos});
      });
  }

  render() {
    return (
      <div className="test">
        {Object.keys(this.state.cryptos).map(key => (
          <div id="crypto-container">
            <span className="left">{key}</span>
            <span className="right">
              <NumberFormat
                value={this.state.cryptos[key].EUR}
                displayType={"text"}
                decimalPrecision={2}
                thousandSeparator={true}
                prefix={"€"}
              />
            </span>
          </div>
        ))}
      </div>
    );
  }
}

export default apitest;

【问题讨论】：

您能否发布一个您收到的回复的示例？
对象 { BTC: {…}, ETH: {…}, XRP: {…}, BCH: {…}, EOS: {…}, TRX: {…} }
这不是一个对象数组，这是一个具有属性的对象，而这些属性又是对象。对吗？
是的，你是对的！
正是这个对象，其属性又是对象。因此，要么编辑您的问题，要么相应地提出问题

标签： javascript html reactjs api axios

【解决方案1】：

您收到的是一个对象，其属性本身就是对象。要遍历这些属性，您可以使用 Object.keys()，如下所示：


Object.keys(response).forEach((property) => {
    // Access each object here by using response[property]...
})

您可能还需要先转换来自 JSON 的响应，但我相信您知道该怎么做。

【讨论】：

除非您以后需要删除（实际上是 splice()）数组的元素，否则此方法有效。您可以使用delete response[property] 删除对象成员，但对象中的“索引”（即键）不会更改。

【解决方案2】：

AXIOS 的响应是一个 JSON 数组？如果是，您是否尝试在 AXIOS 中强制 json 响应？

axios
  .get(
    "https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,XRP,BCH,EOS,TRX&tsyms=EUR,CHANGE&api_key=xxx",
    {
      responseType: 'json',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      }
    }
  )
  .then(...)

除此之外，你在渲染中迭代的方式会更好：

在迭代之前检查this.state.cryptos是否存在。
将key放在迭代器的第一个缩进的div上； ReactJ 需要它。
创建对象迭代器而不是键迭代器。

渲染重构：

render() {
  if(this.state.cryptos.length === 0) return null;

  return (
    <div className="test">
      {this.state.cryptos.map((crypto, key) => (
        <div id="crypto-container" key={key}>
          <span className="left">{key}</span>
          <span className="right">
            <NumberFormat
              value={crypto.EUR}
              displayType={"text"}
              decimalPrecision={2}
              thousandSeparator={true}
              prefix={"€"}
            />
          </span>
        </div>
      ))}
    </div>
  );
}

【讨论】：