錯誤呈現定製組件陣列陣營本地

我想呈現的（定製）反應原住民分量的數組，但我收到以下錯誤，當我嘗試這樣做：錯誤呈現定製組件陣列陣營本地

元素類型無效：期望一個字符串（對於內置組件）或類/函數（對於複合組件），但得到：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

錯誤呈現定製組件陣列陣營本地

回答

相關問題