ReactJS 获取 JSON API 数据——正确的方法？
本·卡明斯基
我一直在与 ES6 斗争，试图提出一个非常简单的操作。我想从以下三个网站之一调用比特币的 JSON API 数据：
所有三个站点 API 端点都直奔我想要的价格，我认为这可能是问题所在。没有数据数组，只有具体价格。在我上面使用#3 的示例中，唯一的对象是“USD”。话虽如此，我认为我把这个过程想得太多了，因为我用更多的数据和数据数组进入了 API —— 我已经使用 ReactJS 完成了。
试图到达在 React DOM Inspector 中显示为“状态”的单个端点，并显示为“USD”并获取正确的价格，即使 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 找到正确的路径。另外，我正在使用“axios”来“获取”API 数据，因为我已经读到“获取”尚未得到全球支持？2017年还是这样吗？
使用上述方法，我可以在 Inspector 中看到这一点：
但是当我转到检查员的“控制台”部分时，我被告知“this.state.USD.map 不是函数”。
我觉得我正处于解决这个任务的风口浪尖上，但我认为我在 Promise 的映射上有问题。
托马斯·穆拉奇克
问题是：
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": "",
}
},
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用Axios在Reactjs中从Api获取数据
- 2
未在reactJS中获取API数据
- 3
从reactjs中的API获取数据时出错
- 4
ReactJS-从URL获取json对象数据
- 5
从 API 到前端 Reactjs 访问 json 数据
- 6
ReactJS 获取外部 Json
- 7
如何从flickr API获取正确的JSON对象
- 8
如何使用reactjs在表中显示从api获取的数据
- 9
ReactJS调用JSON API
- 10
在表中的Reactjs中显示从JSON获取的数据
- 11
使用ReactJS从JSON获取数据时遇到问题
- 12
Reactjs无法通过映射函数获取json数据
- 13
ReactJS-获取调度结果的正确方法
- 14
从多个 REST 端点获取 JSON 数据的正确方法
- 15
无法正确获取JSON数据
- 16
ReactJs Redux 数据获取
- 17
使用Angular Js从API获取Json数据
- 18
使用PHP从JSON API中获取数据
- 19
使用 Angular 2 从 API 获取 JSON 数据
- 20
进行api调用以获取json数据
- 21
无法使用api获取json数据
- 22
从 json (google geocode api) 获取某些数据
- 23
从 Flickr api 使用 JSONP 获取 JSON 数据
- 24
无法从 api 调用中获取 Json 数据
- 25
从 Coinmarketcap API 获取 Json 特定变量数据
- 26
使用reactjs渲染JSON数据（来自reddit API）
- 27
在Reactjs中使用远程数据获取getInitialState的正确方法是什么？
- 28
ReactJS-获取数据并发送到另一个组件的正确方法
- 29
使用python从API获取JSON数据时获取keyerror
我来说两句