Как разделить аксио получить массив объектов

Question

Здравствуйте. Я сделал простой запрос на получение 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;

Answer 1

То, что вы получаете, является объектом, свойства которого сами являются объектами. Чтобы перебрать эти свойства, вы можете использовать Object.keys (), например:

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

Вам также может понадобиться сначала преобразовать ответ из JSON, но я уверен, что вы знаете, как это сделать.

Answer 2

Ответ от AXIOS - это массив JSON? Если да, пытались ли вы вызвать ответ JSON в AXIOS?

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