React.createElement：类型无效-预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象

Question

我用相同的标题检查了StackOverflow上的许多答案，但似乎找不到我的错误。 我正在关注有关Udemy的教程。

我在AlbumList Component的render方法中调用一个函数。 该函数遍历相册数组，并将每个相册传递给AlbumDetail组件，然后将这些组件作为列表返回。

AlbumList组件

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

import AlbumDetail from './AlbumDetail';

class AlbumList extends Component {
  state = {
    albums: []
  };

  componentWillMount() {
    axios.get('http://rallycoding.herokuapp.com/api/music_albums')
      .then(response => this.setState({ albums: response.data }));
  }

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

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

export default AlbumList;

AlbumDetail组件

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

const AlbumDetail = (props) => {
  console.log('Inside AlbumDetail');
  console.log(props);

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

export default AlbumDetail;

编辑

我已经从AlbumList组件中的AlbumDetail导入中删除了大括号'{}'。 仍然没有区别

错误

错误堆栈

控制台日志（AlbumDetail组件）

console.log返回此

Answer 1

我相当确定， import { AlbumDetail } ...是导致错误的原因。 它应该是import AlbumDetail ...因为它是默认导入。

另外，您在AlbumDetail组件的返回中有错字。 你把专辑拼错了。

编辑

import View from 'react-native'还有另一个错误。 应该import { View } from 'react-native' AlbumList组件中的import { View } from 'react-native' 。