React Native如何渲染API返回的全部子分类卡片数据？

出现“Objects are not valid as a React child”错误的核心原因是你直接尝试渲染数组/对象本身，React无法将原始数据类型作为子元素渲染，必须遍历数组，把每个子分类转换成对应的React组件。

具体实现步骤 #

1. 确认Context中的数据结构
   确保你从Context中获取的分类数据包含有效的subcategories数组，结构示例：

   {
     id: 1,
     name: "鸟类分类",
     subcategories: [
       { id: 101, name: "roofvogels", description: "猛禽相关内容..." },
       { id: 102, name: "parkieten", description: "鹦鹉相关内容..." }
     ]
   }
   

2. 在组件中遍历数组生成卡片
   使用Array.map()方法遍历subcategories数组，为每个子分类渲染一个卡片组件，同时必须添加唯一的key属性（推荐用子分类的id，避免使用数组索引）。

   示例代码：

   import { useContext } from 'react';
   import { ScrollView, Text } from 'react-native';
   import { CategoryContext } from '../contexts/CategoryContext';
   import SubcategoryCard from './SubcategoryCard';
   
   const CategoryCardScreen = () => {
     const { currentCategory } = useContext(CategoryContext);
   
     // 空值判断，处理数据未加载或数组为空的情况
     if (!currentCategory?.subcategories?.length) {
       return <Text>加载中...</Text>;
     }
   
     return (
       <ScrollView style={{ padding: 8 }}>
         {currentCategory.subcategories.map(subcat => (
           <SubcategoryCard 
             key={subcat.id} 
             data={subcat} 
           />
         ))}
       </ScrollView>
     );
   };
   
   export default CategoryCardScreen;
   

3. 实现子分类卡片组件
   单独创建SubcategoryCard组件，接收子分类数据作为props，渲染具体内容：

   import { View, Text, StyleSheet } from 'react-native';
   
   const SubcategoryCard = ({ data }) => {
     return (
       <View style={styles.cardContainer}>
         <Text style={styles.cardTitle}>{data.name}</Text>
         {data.description && <Text style={styles.cardDesc}>{data.description}</Text>}
       </View>
     );
   };
   
   const styles = StyleSheet.create({
     cardContainer: {
       backgroundColor: '#ffffff',
       borderRadius: 8,
       padding: 16,
       marginVertical: 8,
       shadowColor: '#000',
       shadowOffset: { width: 0, height: 2 },
       shadowOpacity: 0.1,
       shadowRadius: 4,
       elevation: 3,
     },
     cardTitle: {
       fontSize: 18,
       fontWeight: '600',
       marginBottom: 8,
     },
     cardDesc: {
       fontSize: 14,
       color: '#666',
     },
   });
   
   export default SubcategoryCard;
   

关键注意事项 #

• 绝对不能直接渲染{currentCategory.subcategories}，必须通过map转换为React组件
• key属性必须唯一，使用子分类的唯一标识（如id）而非数组索引，避免列表更新时的性能问题和警告
• 加入空值判断，防止数据未加载时出现undefined.map的崩溃问题

内容的提问来源于stack exchange，提问作者mightycode Newton