React Native 显示简单的 Json 数据 [英] React Native display simple Json Data

查看:132
本文介绍了React Native 显示简单的 Json 数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试创建一个简单的页面,我想在其中显示从 Json 文件中获取的数据.不幸的是,我得到 "Invariant Violation: Objects are not valid as a React child (found: object with keys {ts, Trend, baro, temp, hum,wind,rain, et,forecast, sun}).如果你的意思是要呈现一组子项,请改用数组."

I am trying to create a simple page, in which I want to display the data i get from the Json file. Unfortunately I get "Invariant Violation: Objects are not valid as a React child (found: object with keys {ts, trend, baro, temp, hum, wind, rain, et, forecast, sun}). If you meant to render a collection of children, use an array instead."

所以它加载了 Json,但我无法显示数据.试过各种方法都解决不了.

So it loads the Json but I cant display the data. If tried various methods, but couldnt solve it.

App.js

import React from 'react'
import { AppRegistry, StyleSheet, FlatList, Text, View, Alert, ActivityIndicator, Platform} from 'react-native'

export default class Planner extends React.Component {
  constructor(props)
  {

    super(props);

    this.state = { 
    isLoading: true
  }
  }

  componentDidMount() {

       return fetch('url')
         .then((response) => response.json())
         .then((responseJson) => {
           this.setState({
             isLoading: false,
             dataSource: responseJson
           }, function() {
             // In this block you can do something with new state.
           });
         })
         .catch((error) => {
           console.error(error);
         });
     }

FlatListItemSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "100%",
          backgroundColor: "#607D8B",
        }}
      />
    );
  }

  render() {

    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }

    return (

<View>

        data ={ this.state.dataSource }

          renderItem={({item}) => <Text > {item.temp.out.c} </Text>}

          keyExtractor={(item, index) => index}

</View>

    );
  }
}

Json

{
  "ts": 1530290929,
  "trend": {
    "val": -20,
    "text": "langsam fallend"
  },
  "baro": 1010.4310482000001,
  "temp": {
    "out": {
      "f": 85.9,
      "c": 29.9
    }
  },
  "hum": {
    "out": 29
  },
  "wind": {
    "speed": {
      "mph": 5,
      "kmh": 8
    },
    "avg": {
      "mph": 3,
      "kmh": 4.8
    },
    "dir": {
      "deg": 58,
      "text": "ONO"
    }
  },
  "rain": {
    "rate": 0,
    "storm": 0,
    "day": 0,
    "month": 100.33,
    "year": 451.358
  },
  "et": {
    "day": 176,
    "month": 480,
    "year": 1673
  },
  "forecast": {
    "val": 6,
    "rule": 45,
    "text": "Zunehmend wolkig bei gleichbleibender Temperatur."
  },
  "sun": {
    "uv": 1.3,
    "rad": 322,
    "rise": "4:25",
    "set": "20:37"
  }
}

提前致谢!

推荐答案

我认为您正在尝试将 props 传递给 View.要正确执行此操作,请将您的代码更改为

I think you are trying to pass props to View. To do it correctly, change your code to

<View data ={ this.state.dataSource }
      renderItem={({item}) => <Text > {item.temp.out.c} </Text>}
      keyExtractor={(item, index) => index}/>

这篇关于React Native 显示简单的 Json 数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆