Question

我正在尝试在本机应用程序中显示wordpress帖子。

以下是Blog.js文件中的内容。

import React from 'react';
import { StyleSheet, View, TouchableOpacity, Text, Alert, FlatList } from 'react-native';
import { HTML } from 'react-native-render-html';

class BlogItem extends React.Component {

  constructor(props) {
    super(props);
  }

  blogChoice = () => {
    this.props.choosePost(this.props.id);
  }

  render() {
    let blogItems = `
      <a href=${this.props.id} style="textDecorationLine: none; color: #000000;  textAlign: center">
        <img src=${this.props.imageSrc} />
        <h1>${this.props.title}</h1>
        ${this.props.excerpt}
      </a>
    `;
    return (
      <View style={{borderBottomWidth: 2, borderBottomColor: '#000000', borderStyle: 'solid'}}>
        <HTML html={blogItems} onLinkPress={()=>this.blogChoice()} />
      </View>
    );
  }
}

export class Blog extends React.Component {

  static navigationOptions = {
    header: null
  }

  constructor(props) {
    super(props);
    this.state = {blogLoaded: false};
  }

  chooseBlog = (blogID) => {
    console.log(`Blog ID chosen: ${blogID}`);
  }

  componentDidMount() {
    // return fetch('https://public-api.wordpress.com/rest/v1.1/sites/reactnative.travel.blog/posts')
    return fetch('https://public-api.wordpress.com/rest/v1.1/sites/myglobomantics.wordpress.com/posts')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          blogLoaded: true,
          blogList: Array.from(responseJson.posts)
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }

  render() {
    return (
      <View>

        { this.state.blogLoaded && (
          <View style={{ paddingTop: 40 }}>
            <FlatList
              data={this.state.blogList}
              keyExtractor={(item, index) => item.ID.toString()}
              renderItem={({item}) => 
                <BlogItem
                  id={item.ID}
                  title={item.title}
                  imageSrc={item.featured_image}
                  excerpt={item.excerpt}
                  choosePost={this.chooseBlog}
                />
              }
            />
          </View>
        )}

        { !this.state.blogLoaded && (
            <View style={{ paddingTop: 30 }}>
              <Text> LOADING </Text>
            </View>
        )}

      </View>    
    );
  }

}

app.js文件将组件用作：

import { Blog } from './app/views/Blog.js';

它在其中创建一个stackNavigation。

const MyRoutes = createStackNavigator({
    HomeRT: {
      screen: Home
    },
    BlogRT: {
      screen: Blog
    },
  },
  {
    'initialRouteName': 'HomeRT'
  }
);

export default createAppContainer(MyRoutes);

但是，当我导航到Blog组件时，会不断出现此错误：

Device: (96:380) Invariant Violation: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This error is located at:
    in RCTView
    in BlogItem
    in RCTView
    in u
    in RCTView
    in RCTScrollView
    in ScrollView
    in z
    in b
    in RCTView
    in RCTView
    in Blog
    in t
    in RCTView
    in RCTView
    in RCTView
    in f
    in RCTView
    in f
    in C
    in t
    in n
    in RCTView
    in n
    in RCTView
    in f
    in S
    in t
    in n
    in RCTView
    in t
    in t
    in p
    in r
    in n
    in RCTView
    in RCTView
    in n
    in n
    in v
    in RCTView
    in RCTView
    in c

This error is located at:
    in n
    in RCTView
    in RCTView
    in n
    in n
    in v
    in RCTView
    in RCTView
    in c

我已经检查了从wordpress API获得的所有值，它们都是非空值。我也尝试删除BlogItem组件并逐步构建它，但无法指出导致错误的原因。我怎么了任何帮助将不胜感激。

Answer 1

从HTML导入中删除冰壶：

import { HTML } from 'react-native-render-html';

我认为您不需要在这里进行销毁。我想您要使用默认导出。

发生的事情是HTML是undefined，因此不是“有效元素”。

如果您的模块已命名导出：

// cool-stuff.js
module.exports = {
  SomeCoolThing: () => console.log('some cool thing'),
  SomeOtherCoolThing: () => console.log('some other cool thing')
}

然后，您可以导入整个内容并静态引用这些项目：

import CoolStuff from './cool-stuff.js';

CoolStuff.SomeCoolThing();

或者您也可以在导入时对其进行解构以获得所需的零件：

import {SomeCoolThing} from './cool-stuff.js'

SomeCoolThing();

但是，如果模块仅具有默认导出：

// cool-stuff.js
module.exports = () => console.log('some other cool thing')

然后进行销毁是没有道理的：

import {SomeCoolThing} from './cool-stuff.js'

SomeCoolThing(); // doesn't exist. blows up.

您只需要默认导出，就可以随意调用它：

import SoCool from './cool-stuff.js'

SoCool(); // works

React Native：不变违规：元素类型无效：预期的字符串或类/函数但得到：未定义

1 个答案: