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

Question

我正在使用 API 显示加密货币的数据，称为 CryptoCompare。我是 React 新手，但我已经设法使用 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

您可能需要解析 JSON。在保存之前执行此操作可能会很好。

  const coins = JSON.parse(res.data)

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

我也遇到了和你一样的问题。 您无法访问数据中的对象，因为渲染发生时它是空的。

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

我希望这个答案可以帮助未来的反应用户

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

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

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

Accessing JSON object within Object using React/Axios

api

json

object

reactjs

axios