エラーで、私は（特注）の配列をレンダリングしようとしているネイティブ

Question

を反応させるのネイティブコンポーネントを反応させるのが、私はそうしようとすると、私は次のエラーを取得しています：

要素の型が無効です：文字列（組み込みコンポーネント用）またはクラス/関数（複合コンポーネント用）、got：オブジェクトが必要です。 'CategoryList'のレンダリングメソッドを確認してください。

Iは、（ステートレスコンポーネントである）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', 
    }, 
]; 

Answer 1

import View from 'react-native'がCategoryListであるかどうかを確認してください。 import {View} from 'react-native'

Answer 2

カテゴリが空の場合、categoryElementsは空の配列です。代わりに

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

、コードは次のようになります。あなたが `作るCategoryList`空のビューを返すためにあればちょっと` constのCategoryList = _ => `のように、何が起こる

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