Question

我正在尝试渲染一组（自定义构建的）React Native组件，但是当我尝试这样做时，我收到以下错误：

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

我有一个名为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

如果categories为空，则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;

在React Native中渲染自定义组件数组时出错

2 个答案: