响应<Text>中API中的本机显示数据
响应<Text>中API中的本机显示数据
提问于 2018-06-21 13:16:53
我使用fetch()从外部数据中获取数据，并希望将其显示在View中。
console.log(responseJson)正在显示API中的数据，但是this.state.data在我的<Text>中没有显示它。
我的应用程序中显示的都是"Temperatur: C“。
在我运行的时候没有发现任何错误。
我的this.state.data不是展示它的正确方式吗？
import React, { Component } from 'react'
import { StyleSheet, Text, View, Image, Button, Alert } from 'react-native';
class Wether extends Component {
state = {
data: ''
}
componentDidMount = () => {
fetch('https://opendata-download-metfcst.smhi.se/api/category/pmp2g/version/2/geotype/point/lon/16/lat/58/data.json',{
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
<View>
<Text>
Temperatur: {this.state.data} C
</Text>
</View>
)
}
}
export default Wether我的console.log(responseJson)显示：
Object {
"parameters": Array [
Object {
"level": 0,
"levelType": "hmsl",
"name": "msl",
"unit": "hPa",
"values": Array [
1005,
],
},回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-21 13:54:31
我已经检查过你的代码了，看起来一切都很好。您应该考虑的一件事是响应JSON数据对象。
不应将响应JSON-Data显示在文本组件中。
<View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
<Text>
Temperatur: { this.state.data.approvedTime } C
</Text>
</View>请重新检查你的代码，希望它能有所帮助。
Stack Overflow用户
发布于 2018-06-21 13:56:14
您应该在构造函数中初始化this.setState()状态，我们可以在其他地方使用。
import React, { Component } from 'react'
import { StyleSheet, Text, View, Image, Button, Alert } from 'react-native';
class Wether extends Component {
constructor(props) {
super(props);
state = {
data: ''
}
}
componentDidMount = () => {
fetch('https://opendata-download-metfcst.smhi.se/api/category/pmp2g/version/2/geotype/point/lon/16/lat/58/data.json',{
method: 'GET'
})
.then((response) => response.json())
.then((responseJson) => {
console.log(responseJson);
this.setState({
data: responseJson
})
})
.catch((error) => {
console.error(error);
});
}
render() {
return (
<View>
<Text>
Temperatur: {this.state.data} C
</Text>
</View>
)
}
}
export default Wether页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50969544
复制相关文章
相似问题
腾讯云开发者
