时间戳

首页 > 解决方案 > React Native - 显示来自 API 的数据

javascript - React Native - 显示来自 API 的数据

问题描述

我正在使用fetch()从外部数据中获取数据并希望将其显示在我的View.

console.log(responseJson)正在显示来自 API 的数据，但this.state.data在我<Text>没有显示它。

我的应用程序中显示的所有内容都是“温度：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,
           ],
         },

标签： javascriptreactjsreact-native

解决方案

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

您不应该在文本组件中显示您的响应 JSON 数据

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

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

推荐阅读