Question

当我将JSON提要（Wordpress JSON提要）解析到我的React Native提要页面时，我的模拟器中没有看到任何结果，以下是我正在使用的代码;

---------- ---------- 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

Answer 1

将此this.setState({data: responseJson.items})更改为this.setState({data: responseJson.items} ,() => console.log(this.state.data))，您应该能够看到是否正确获取数据。如果它确实记录了它只是一个样式问题，你可能只需要添加高度/宽度来查看它们在屏幕上呈现。此外，当您正在执行module.export时，您无需执行export default。

将JSON提要（WP提要）解析为React Native提要页面

1 个答案: