React Native 显示简单的 Json 数据

本文介绍了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}/>