【问题标题】:React Native Error - Invariant Violation: Element type is invalidReact Native Error - Invariant Violation:元素类型无效
【发布时间】:2019-01-29 10:58:01
【问题描述】:

我正在学习 Udemy 课程来构建一个演示反应原生应用程序。到目前为止,该应用程序由 3 个组件组成 - App、AlbumList 和 AlbumDetail。下面列出了每个代码。


App.js

import React, { Component } from 'react';
import View from 'react-native';
import AlbumDetail from './AlbumDetail'
import axios from 'axios';

class AlbumList extends Component {

  constructor(props){
    super(props)
    this.state = { albums: [{"title": "one"}, {"title": "two"}] }
  }

  renderAlbums() {
    return this.state.albums.map(album =>
      <AlbumDetail key={album.title} album={album} />
    );
  }

  render() {
    return (
      <View>
        { this.renderAlbums() }
      </View>
    );
  }
}

export default AlbumList;

相册列表.js

import React, { Component } from 'react';
import View from 'react-native';
import AlbumDetail from './AlbumDetail'
import axios from 'axios';

class AlbumList extends Component {

  constructor(props){
    super(props)
    this.state = { albums: [{"title": "one"}, {"title": "two"}] }
  }

  renderAlbums() {
    return this.state.albums.map(album =>
      <AlbumDetail key={album.title} album={album} />
    );
  }

  render() {
    return (
      <View>
        { this.renderAlbums() }
      </View>
    );
  }
}

export default AlbumList;

AlbumDetail.js

import React from 'react';
import { View, Text } from 'react-native';

const AlbumDetail = (props) => {
  return (
    <View>
      <Text>{props.album.title}</Text>
    </View>
    )
};

export default AlbumDetail;

package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "expo": "^32.0.0",
    "react": "16.5.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0"
  },
  "private": true
}

当我在移动设备(运行 Android 8.0.0 的一加 3T)中运行 npm start 并启动应用程序时,出现以下错误

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

This error is located at:
    in AlbumList (created by App)
    in RCTView (at View.js:44)
    in App (at withExpoRoot.js:22)
    ...
    ...

我查看了 StackOverflow 中发布的一些问题,其中大部分都涉及导出和导入组件的不正确方式。据我所见,我在这里正确导出和导入组件,但仍然出现错误。

如果您需要更多信息,请随时添加评论。感谢您对调试问题的任何帮助。

【问题讨论】:

  • 您在 App.js 和 AlbumList.js 中添加了相同的代码

标签: javascript android reactjs react-native expo


【解决方案1】:

App.js 和 AlbumDetail.js 中的 import 语句错误

改变它

import {View} from "react-native"

【讨论】:

  • 天哪.. 我花了很尴尬的时间被困在这上面。感谢您指出!我接受你的答案是正确的。
猜你喜欢
  • 2017-09-16
  • 2018-05-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2023-03-17
  • 2020-05-10
  • 1970-01-01
  • 2019-12-05
相关资源
最近更新 更多