Question

我正在使用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,
           ],
         },

Answer 1

我检查了您的代码后，似乎一切都很好。您应该考虑的一件事就是您的响应JSON数据对象。

您不应将响应JSON数据显示为显示在文本组件
中

<View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
  <Text>
   Temperatur: { this.state.data.approvedTime } C
  </Text>
</View>

请再次重新检查您的代码，希望对您有所帮助。

Answer 2

您应该在构造函数中初始化 state ，然后我们可以在其他任何地方使用 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

React Native-在<text>中显示来自API的数据

2 个答案: