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

【问题标题】：Accessing JSON object within Object using React/Axios使用 React/Axios 访问 Object 中的 JSON 对象
【发布时间】：2018-07-07 13:47:37
【问题描述】：

我正在使用一种名为 CryptoCompare 的 API 来显示加密货币的数据。我是一个 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) 等也不...

【问题讨论】：

标签： json reactjs api object axios

【解决方案1】：

您正在迭代 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>
    );
  }

这里的代码沙盒：https://codesandbox.io/s/3rvy94myl1

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

【解决方案3】：

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

  const coins = JSON.parse(res.data)

【讨论】：