如何使用 react.js 获取 JSON API 数据并在页面上显示答案

【问题标题】：How to fetch JSON API data and show that on Page using react.js如何使用 react.js 获取 JSON API 数据并在页面上显示
【发布时间】：2017-10-06 12:11:10
【问题描述】：

我想从“https://blockchain.info/api/exchange_rates_api”获取所有数据并在页面上显示。我试过了，但收到一条错误消息。这是我的代码：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(){
    super();
      this.state = {
        data: []
        }
    }

    componentDidMount() 
    {
      fetch("https://blockchain.info/ticker").
        then((Response) => Response.json()).
          then ((findresponse)=>
            {
              console.log(findresponse)
              this.setState({
                data:findresponse
                  });
            }) 
    }

    render() 
    {
      return(
        <div>
          {
            this.state.data.map((dynamicData, Key) =>
              <div>
                <span>{dynamicData}</span>
              </div>
            )
          }
        </div>
        )
    }
}

export default App;

我在 setState 方法中遇到错误。当我尝试不使用 setState 方法进行编写时，我在控制台中获得了数据。但我想要表格形式的页面上的数据。

【问题讨论】：

你说你在 setState 中遇到了一个错误，你能把错误显示出来

标签： json reactjs api

【解决方案1】：

您正在从 API 调用中获取一个对象，但您需要一个数组才能使用 map，因此您需要这样做：

fetch("https://blockchain.info/ticker").
   then((Response) => Response.json()).
     then ((findresponse)=>
        {
          this.setState({
            data: [findresponse] //wrap findresponse brackets to put the response in an array
           });
        })

【讨论】：

谢谢你，女士，我已经设置了数据：[findresponse.data] 但我在 render() 方法中遇到了问题，请帮助我希望 API 数据以表格格式进入页面。
@tshr findresponse 没有.data 它只是findresponse。渲染方法有什么问题？表格格式是什么意思？在 HTML <table>?
是的，女士，我已经更改了 this.state { data: [findresponse] }

【解决方案2】：

问题是您从 api 调用收到的 JSON 响应是 object 而不是 array。对象没有定义map 函数。首先需要将对象转换为数组。

【讨论】：

谢谢您，先生，但仍然面临问题