Question

我一直在和ES6一起努力，试图提出一个非常简单的操作。我想从以下三个网站之一调用比特币的JSON API数据：

https://cryptowat.ch
https://coinmarketcap.com/
https://www.cryptocompare.com/

所有三个站点的API端点都直接达到我想要的价格，我认为这可能是问题所在。没有数据数组，只有具体的价格。在上面使用＃3的示例中，唯一的对象是＆＃34; USD＆＃34;。话虽如此，我认为我已经过度思考这个过程，因为我已经使用更多的数据和数据数组进入了API - 我已经使用ReactJS完成了。

尝试到达显示为＆＃34;状态＆＃34;的单个端点。在React DOM Inspector中作为＆＃34; USD＆＃34;并且正在提取正确的价格，即使ReactJS看到并捕获它，我也无法在页面上显示价格。

我的代码：

var BitcoinApp = React.createClass({

 getInitialState: function() {
   return {
     "USD": []
   }
 },

 componentDidMount: function() {

  var th = this;
  this.serverRequest = 
    axios.get(this.props.source)
      .then(function(result) {    
        th.setState({
          USD: result.data.USD
        });
      })
  },

componentWillUnmount: function() {
  this.serverRequest.abort();
},

render: function() {
  return (
    <span>
      {this.state.USD.map(function(Data) {
        return (
          <div key={Data.USD} className="testbtc">
             <p>{Data.USD}</p>
          </div>
        );
      })}
    </span>
  )
 }
 });

 ReactDOM.render(<BitcoinApp source="https://min-api.cryptocompare.com/data/price?fsym=BTC&tsyms=USD&e=Coinbase" />, document.querySelector("#btcPrice"));

我会提到我已经对此做了大量研究，并找到了很多答案 - 各种不同！每个人都知道ReactJS文档已经过时了，所以找到ReactJS的正确路径很难说。另外，我正在使用＆＃34; axios＆＃34;到＆＃34; GET＆＃34; API数据，因为我已经读过＆＃34; fetch＆＃34;还没有得到全球支持吗？这在2017年仍然如此吗？

使用上述方法，我可以在Inspector中看到：

但是当我转到＆＃34; Console＆＃34;检查员的一部分，我告诉他们＆＃34; this.state.USD.map不是一个功能＆＃34;。

我觉得我正处于解决这项任务的尖端，但我认为我对这个承诺的映射出了问题。

Answer 1

问题是：

th.setState({
   USD: result.data.USD
});

正在设置不可迭代的对象。我的意思是this.state.USD.map is not a function意味着USD不是一个数组（你可以在控制台中看到它）。

试试看看会发生什么：

th.setState({
   USD: [result.data.USD]
});

然而，你写道：

没有数据数组，只有具体价格。

然后我认为最好的解决方案是只改变渲染方法和初始状态：

render: function() {
  return (
    <span>
          <div className="testbtc">
             <p>{this.state.USD}</p>
          </div>
    </span>
  )
 }


 getInitialState: function() {
   return {
     "USD": "",
   }
 },

ReactJS获取JSON API数据 - 正确的方法？

1 个答案: