React.createElement：type无效 - 期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object

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;

修改

我删除了大括号＆＃39; {}＆＃39;来自AlbumList组件中的AlbumDetail导入。仍然没有区别

错误

Error Stack

控制台日志（AlbumDetail组件）

console.log returns this

Answer 1

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

此外，您的AlbumDetail组件返回中有拼写错误。你拼错了专辑。

修改

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