错误呈现定制组件阵列阵营本地

我想呈现的（定制）反应原住民分量的数组，但我收到以下错误，当我尝试这样做：错误呈现定制组件阵列阵营本地

元素类型无效：期望一个字符串（对于内置组件）或类/函数（对于复合组件），但得到：object。检查'CategoryList'的渲染方法。

我有一个名为CategoryList组分（其是无状态的分量），并且它呈现Category组件的集合。他们定义如下：

CategoryList：

import React, { PropTypes } from 'react'; 
import View from 'react-native'; 
import humps from 'humps'; 
import Category from './Category'; 

const CategoryList = ({ categories }) => { 
    const camelizedCategories = humps.camelizeKeys(categories); 
    const categoryElements = camelizedCategories.map(
    (category, idx) => <Category {...category} key={idx} /> 
); 

    return (
    <View> 
     {categoryElements} 
    </View> 
); 
}; 

CategoryList.propTypes = { 
    categories: PropTypes.arrayOf(
    PropTypes.shape({ 
     display_name: PropTypes.string.isRequired, 
     list_name: PropTypes.string.isRequired, 
     list_name_encoded: PropTypes.string.isRequired, 
     newest_published_date: PropTypes.string.isRequired, 
     oldest_published_date: PropTypes.string.isRequired, 
     updated: PropTypes.string.isRequired, 
    }) 
), 
}; 

export default CategoryList;

Category：

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

const Category = ({ 
    displayName, 
    listName, 
    listNameEncoded, 
    newestPublishedDate, 
    oldestPublishedDate, 
    updated, 
}) => { 
    return (
    <View> 
     <Text> 
     {displayName} 
     </Text> 
     <Text> 
     {listName} 
     {listNameEncoded} 
     </Text> 
     <Text> 
     {listNameEncoded} 
     </Text> 
     <Text> 
     {newestPublishedDate} 
     </Text> 
     <Text> 
     {oldestPublishedDate} 
     </Text> 
     <Text> 
     {updated} 
     </Text> 
    </View> 
); 
}; 

Category.propTypes = { 
    displayName: React.PropTypes.string.isRequired, 
    listName: React.PropTypes.string.isRequired, 
    listNameEncoded: React.PropTypes.string.isRequired, 
    newestPublishedDate: React.PropTypes.string.isRequired, 
    oldestPublishedDate: React.PropTypes.string.isRequired, 
    updated: React.PropTypes.string.isRequired, 
}; 

export default Category;

最后，一类是被称为如下：

<CategoryList categories={mockedData} />

凡被定义mockedData如下：

const mockedData = [ 
    { 
    list_name: 'Combined Print and E-Book Fiction', 
    display_name: 'Combined Print & E-Book Fiction', 
    list_name_encoded: 'combined-print-and-e-book-fiction', 
    oldest_published_date: '2011-02-13', 
    newest_published_date: '2016-08-21', 
    updated: 'WEEKLY', 
    }, 
    { 
    list_name: 'Combined Print and E-Book Nonfiction', 
    display_name: 'Combined Print & E-Book Nonfiction', 
    list_name_encoded: 'combined-print-and-e-book-nonfiction', 
    oldest_published_date: '2011-02-13', 
    newest_published_date: '2016-08-21', 
    updated: 'WEEKLY', 
    }, 
];

来源

2016-08-21 Steven L.

如果你把'CategoryList'返回一个空视图会发生什么，有点像'常量所属分类= _ =>'？你还会得到同样的错误吗？ – nabn

Nabn，当我这样做时没有错误。 –

请检查import View from 'react-native'在CategoryList是否有错字。应该是import {View} from 'react-native'

来源

2016-08-21 18:08:15 nabn

这很尴尬。这确实是一个错字。我没有太在意，因为我的棉绒通常会告诉我它是否无法导入某些东西。它必须导入一些东西，但显然不是我所期望的。 –

很高兴帮助。我们都经历过，大声笑！所以不用担心。 – nabn

如果类别为空，categoryElements是一个空数组。

const categoryElements = camelizedCategories.map(
    (category, idx) => <Category {...category} key={idx} /> 
);

相反，代码应该是：

const categoryElements = camelizedCategories.length > 0 ? camelizedCategories.map(
    (category, idx) => <Category {...category} key={idx} /> 
) : null;

来源

2016-08-21 18:18:31 vijayst

错误呈现定制组件阵列阵营本地

回答

相关问题