Question

我正在使用一个显示加密货币数据的API，称为CryptoCompare。我是React noob，但我设法使用Axios来执行AJAX请求。但是我无法访问我想要的JSON元素。

这是JSON的样子：https://min-api.cryptocompare.com/data/all/coinlist

这是我的要求：

import React, { Component } from 'react';
import './App.css';
import axios from "axios";
var NumberFormat = require('react-number-format');

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

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



  componentDidMount() {
    axios.get(`https://min-api.cryptocompare.com/data/all/coinlist`)
    .then(res => {
      const coins = res.data;
      //console.log(coins);
      this.setState({ coinList: coins});
    });
  }



// Object.keys is used to map through the data. Can't map through the data without this because the data is not an array. Map can only be used on arrays.
  render() {
    console.log(this.state.coinList.Data);
    return (
      <div className="App">
        {Object.keys(this.state.coinList).map((key) => (
          <div className="container">
            <span className="left">{key}</span>
            <span className="right"><NumberFormat value={this.state.coinList[key].CoinName} displayType={'text'} decimalPrecision={2} thousandSeparator={true} prefix={'$'} /></span>
          </div>
        ))}
      </div>
    );
  }
}

export default App;

我可以使用console.log（this.state.coinList.Data）;输出一些JSON。它输出JSON对象，但我无法控制对象本身的console.log属性。

例如，我如何输出第一个元素42的CoinName属性？

console.log（this.state.coinList.Data.CoinName）不起作用

也没有console.log（this.state.coinList.Data [0] .CoinName）等......

Answer 1

我也偶然发现了与您同样的问题。 您无法访问数据内部的对象，因为在发生渲染时该对象为空。

我所做的是我制作了条件渲染，如果数据为空，它将仅显示加载屏幕或类似内容。并且当数据加载时，它将访问该数据内部的对象。现在，我可以访问内部的对象，因为我等待数据加载到render中。

我希望这个答案可以帮助将来对用户做出反应

    return (
      <div>
        {this.state.coinList.length>0? <h1>{this.state.coinList[0].coinName}</h1>: "Loading"}
      </div>
    );
  }

已添加：在 console.log 数据中，您可以在条件渲染器内创建新组件。在该组件内部，您可以访问所需的所有数据，因为它们是在加载数据后呈现的。

Answer 2

当你想迭代this.state.coinList时，你正在迭代this.state.coinList.Data。

试试这个：

  render() {
    const data = this.state.coinList.Data;
    if (data == null) return null;
    return (
      <div className="App">
        {Object.keys(data).map((key) => (
          <div className="container">
            <span className="left">{key}</span>
            <span className="right"><NumberFormat value={data[key].CoinName} displayType={'text'} decimalPrecision={2} thousandSeparator={true} prefix={'$'} /></span>
          </div>
        ))}
      </div>
    );
  }

CodeSandbox：https://codesandbox.io/s/3rvy94myl1

Answer 3

您可能需要解析JSON。在保存之前可能会这样做。

jQuery is not defined

使用React / Axios访问Object中的JSON对象

3 个答案: