React Native渲染数组对象名称报错，如何正确显示两个名称？

问题场景 #

开发React Native应用时，尝试通过FlatList显示数组对象中的名称，遇到两个问题：

• 直接渲染整个data数组时，报错：Error: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.
• 固定渲染data[0].name时，会重复显示两次roofvogels，无法正确展示两个不同的名称。

现有代码 #

SubCategoryScreen 代码

/* eslint-disable prettier/prettier */

import React, { useContext } from "react";
import { CategoryContext } from "../../../services/category/category.context";
import { CategoryList } from "./category.screen";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { Spacer } from "../../../components/spacer/spacer.component";

import { Text } from "react-native-paper";

const data = [
    {
        name: "roofvogels",
    },
    {
        name: "parkieten",
    },
];

export const SubCategoryScreen = () => {    

    return (
        <SafeArea>
            <CategoryList
                data={data}
                renderItem={({ item }) => {
                    console.log("data", data);
                    return (
                        <>
                            <Spacer position="bottom" size="large">
                                <Text>{data}</Text>
                            </Spacer>
                        </>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

CategoryList 代码

export const CategoryList = styled(FlatList).attrs({
    contentContainerStyle: {
        padding: 16,
    },
})``;

解决方案 #

1. 改用renderItem中的item对象获取单个名称 #

FlatList的renderItem回调会遍历data数组中的每一项，每次迭代会传入当前项的item对象，直接使用item.name即可获取当前项的名称，而非渲染整个数组。

2. 修复keyExtractor的无效取值 #

原代码中keyExtractor使用item.id，但data数组的项没有id字段，会导致React警告。可以改用item.name作为唯一标识（如果名称不会重复），或者给每个项添加唯一的id字段。

修改后的完整代码 #

/* eslint-disable prettier/prettier */

import React from "react";
import { CategoryList } from "./category.screen";
import { SafeArea } from "../../../components/utility/safe-area.component";
import { Spacer } from "../../../components/spacer/spacer.component";
import { Text } from "react-native-paper";

const data = [
    {
        name: "roofvogels",
    },
    {
        name: "parkieten",
    },
];

export const SubCategoryScreen = () => {    
    return (
        <SafeArea>
            <CategoryList
                data={data}
                renderItem={({ item }) => {
                    return (
                        <Spacer position="bottom" size="large">
                            <Text>{item.name}</Text>
                        </Spacer>
                    );
                }}
                keyExtractor={(item) => item.name}
            />
        </SafeArea>
    );
};

问题原因说明 #

• 直接渲染data数组时，React无法识别对象类型的子元素，因此抛出错误。
• 固定渲染data[0].name时，FlatList会为数组中的每一项都执行renderItem，所以每个项都会显示第一个元素的名称，导致重复。

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