React Render：object.map（）不是函数

Question

我需要帮助确定地图功能无法正常工作的原因。我在ComponentDidMount中放置一个AJAX请求，我能够在控制台日志中看到数据但是我无法访问它。我假设数据没有传递到setState（）。

import React from 'react';
import $ from 'jquery';


export default class Bitcoin extends React.Component{
constructor(props){
super(props);
  this.state = {
   prices:[]
  }
}

componentDidMount(){
 $.ajax({
  type: 'GET',
  url: 'https://index.bitcoin.com/api/v0/lookup?time=2017-01-01T06:00:00Z',
  dataType: 'json',
  success: function(data) {
    console.log(data)
    this.setState({prices: data});
  }.bind(this),
  error: function(xhr, status, err) {
    console.error(this.props.url, status, err.toString());
  }.bind(this)
 });
}

render(){
 const { prices } = this.state;
 return(
  <div>
    <p>
      {
       prices.map(function(price){
             return <p key={price.code}>{price.description}{price.rate}</p>
         })
       }
      </p>
    </div>
    )
   }
 }

控制台输出

Answer 1

查找端点不返回数组，它返回一个JSON对象，具有“open”，“close”和“lookup”属性。您应该在渲染中引用这些：

render(){
 const { prices } = this.state;
 return(
  <div>
    <p>
        <p key={prices.open.price}</p>
        <p key={prices.close.price}</p>
        <p key={prices.lookup.price}</p>
    </p>
  </div>
  )
 }
}

我还认为使用jquery有点反应。使用fetch https://www.npmjs.com/package/isomorphic-fetch或请求https://www.npmjs.com/package/request库更简单，特别是如果你想考虑客户端和服务器端渲染

Answer 2

您的端点返回的对象不是数组。您可以使用UnderscoreJS提供的实用程序功能，该功能允许您映射对象。

此外，您应该考虑使用axios来发出AJAX请求，因为它有助于保持bundle.js文件的重量轻一点。