Question

你好，我提出了一个简单的AXIOS get请求并接收对象数组。但是我用来实现此目的的示例一次返回了所有数组，因此我需要分离对象，以便可以分别使用它们。

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;

Answer 1

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


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

您可能还需要先从JSON转换响应，但是我确定您知道该怎么做。

Answer 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上； ReactJs需要它。
创建对象迭代器，而不是键迭代器。

渲染重构：

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>
  );
}

如何分离axios获取数组对象

2 个答案: