React native React Native:不变冲突：元素类型无效：应为字符串或类/函数，但得到：未定义_React Native

React native React Native:不变冲突：元素类型无效：应为字符串或类/函数，但得到：未定义

react-native

React native React Native:不变冲突：元素类型无效：应为字符串或类/函数，但得到：未定义,react-native,React Native,我正在尝试在react原生应用程序中显示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.Compon

我正在尝试在react原生应用程序中显示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>    
    );
  }

}

它在其中创建堆栈导航

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

我已经检查了我从WordPressAPI获得的所有值，它们是非空值。我还试图删除BlogItem组件并以增量方式构建它，但无法确定导致错误的原因。我做错了什么？任何帮助都将不胜感激。

从HTML导入中删除卷曲：

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

我认为你不需要在这里进行分解。我想您需要默认的导出

现在发生的是

HTML

是

未定义的

，因此不是“有效元素”

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

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

哇，这是可行的，但是你能在答案中解释一下怎么做以及为什么吗？更新了答案，试图解释一下。不知道有多清楚。我累了。如果没有意义，我很乐意尝试澄清。

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

SoCool(); // works