Question

到目前为止，我已经在React Native上完成了一个小项目，将其数据源连接到Wordpress REST API并在显示器上呈现其内容。有三个屏幕，AppBody.js - AppBodyData.js和ReadMore.js

AppBody.js和AppBodyData.js正常工作正常，但是ReadMore.js正在抛出附加错误。

错误截图 https://angular.io/api/forms/AbstractControl#valueChanges

在理想情况下，我想在ReadMore页面上打印特定博客内容的数据，该页面点击了AppBody博客滚动提要，以下是我到目前为止所做的代码;

    ===========AppBody===========
    // ########## Import Dependencies Here ##########
    import React, { Component } from 'react';
    import { Text, View, Image, StyleSheet, Dimensions } from 'react-native';
    import { Container, Header, Content, Card, CardItem, Left, Thumbnail, Body, Button, Icon, Right } from 'native-base';

    // ########## Import Screens Here ##########

    // ########## Import Components Here ##########
    import AppBodyData from './AppBodyData.js';

    export default class AppBody extends Component {

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

      getData() {
        return fetch('https://vint.azurewebsites.net/wp-json/wp/v2/posts')
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({ data: responseJson }, () =>console.log(this.state.data));
          })
          .catch((error) => {
            console.error(error);
          });
      }

      componentDidMount() {
        this.getData();
      }

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


    ===========AppBodyData===========
    // ########## Import Dependencies Here ##########
    import React, { Component } from 'react';
    import { Text, View, Image, StyleSheet, ScrollView } from 'react-native';
    import { Content, Container, Card, CardItem, Left, Thumbnail, Body, Right, Button, Icon } from 'native-base';
    import HTMLView from 'react-native-htmlview';
    import { Actions } from 'react-native-router-flux';

    // ########## Import Screens Here ##########

    // ########## Import Components Here ##########

    export default class AppBodyData extends Component {
        render() {

            let articles = this.props.data.map(function (articleData, index) {
                return (
                    <Card style={{ flex: 0 }}>
                        <CardItem>
                            <Left>
                                <Thumbnail source={require('../img/VintHub.png')} />
                                <Body>
                                    <Text>{articleData.title.rendered}</Text>
                                    <Text note>{articleData.date}</Text>
                                </Body>
                            </Left>
                        </CardItem>
                        <CardItem>
                            <Body>
                                <Image source={require('../img/world.jpg')} style={{
                                    width: 330, height: 150
                                }}/>
                                <HTMLView value={articleData.excerpt.rendered} />
                            </Body>
                        </CardItem>
                        <CardItem>
                            <Left>
                                <Button transparent onPress={Actions.readmore} textStyle={{ color: '#87838B' }}>
                                    <Text>Read more...</Text>
                                </Button>
                            </Left>
                        </CardItem>
                    </Card>
                )
            });

            return (
                <View>
                    {articles}
                </View>

            );
        }
    }

    ===========ReadMore===========
    // ########## Import Dependencies Here ##########
    import React, { Component } from 'react';
    import { Text, Image } from 'react-native';
    import { Container } from 'native-base';
    import HTMLView from 'react-native-htmlview';

    // ########## Import Screens Here ##########

    // ########## Import Components Here ##########
    import { aticle, articleData } from '../components/AppBody.js';

    export default class AppHeader extends Component {
        render() {
            return (
                <Container>
                    <HTMLView value={articleData.content.rendered} />
                </Container>
            );
        }
    }

使用React Native在完整博客页面上不呈现数据

0 个答案: