ReactネイティブフィードページへのJSONフィード（WPフィード）の解析

JSONフィード（Wordpress JSONフィード）をReact Nativeフィードページに解析するときにシミュレータで結果が表示されません。ReactネイティブフィードページへのJSONフィード（WPフィード）の解析

---------- ---------- AppBody.js

import React, {Component} from 'react'; 
    import {Text, View, Image, StyleSheet, Dimensions} from 'react-native'; 
    import {Content, Container, Card, CardItem, Body} from 'native-base'; 

    import AppBodyData from './AppBodyData'; 

    export default class AppBody extends Component { 

     constructor() { 
     super() 
     this.state={ 
      data:[] 
     } 
     } 

     getData() { 

     return fetch('https://www.rayaccountants.co.uk/feed/json') 
       .then((response) => response.json()) 
       .then((responseJson) => { 
       this.setState({data: responseJson.items}); 
       }) 
       .catch((error) => { 
       console.error(error); 
       }); 
     } 

     componenetDidMount(){ 
     this.getData(); 
     } 

     render() { 
     return (
      <Container style={{ 
      marginTop: 100 
      }}> 
      <AppBodyData data={this.state.data}/> 
      </Container> 
     ); 
     } 
    } 

    module.export = AppBody;

---------- AppBodyData.js --- -------

import React, {Component} from 'react'; 
    import {Text, View, Image, StyleSheet, Dimensions} from 'react-native'; 
    import {Content, Container, Card, CardItem, Body} from 'native-base'; 

    export default class AppBodyData extends Component { 
     render() { 

     let articles = this.props.data.map(function(articlesData, index) { 
      return (
      <Card> 
       <CardItem> 
       <Body> 
        <Text> 
        {articlesData.title} 
        </Text> 
       </Body> 
       </CardItem> 
      </Card> 
     ) 
     }); 

     return (
      <Container style={{ 
      marginTop: 60 
      }}> 
      <Container> 
       {articles} 
      </Container> 
      </Container> 
     ); 
     } 
    } 

    module.export = AppBodyData;

私のシミュレータには次のようなものがあります。私が見落としたかもしれないものがありますか？

iOS Simulator Screenshot

出典

2017-07-10 Taimoor Khan

ログメッセージを追加して、どこに問題があるのかを特定します。たとえば、jsonファイルは正しく解析されますか？あなたの 'map'関数で正しい形式のデータですか？ 'articles'をハードコードすると、' Container'は正しくレンダリングされますか？ – phi

変更this.setState({data: responseJson.items} ,() => console.log(this.state.data))にこのthis.setState({data: responseJson.items})、あなたが正しくデータを取得しているかどうかを見ることができるはずです。ログに記録する場合はスタイリングの問題があり、画面に表示される高さと幅を追加するだけでよいでしょう。またexport defaultを実行しているときにmodule.exportを実行する必要はありません。

出典

2017-07-10 16:14:00

ありがとうございます - 私のコンソールのフィードから解析されたデータが得られないようですが、コンソールのスクリーンショットをご覧くださいhttps://ibb.co/n59eua –

どこのアイコンを使用していますか？ブール値の代わりにプロパティとして文字列を 'アクティブ'に渡したというエラーが表示されます。 –

これらの警告メッセージは、フッターのタブバーにあるアイコンに対応していますが、JSON解析データに関するものは何もありません。 .. –

ReactネイティブフィードページへのJSONフィード（WPフィード）の解析

答えて

関連する問題