React Native中Realm.objects数据无法在FlatList渲染的解决方法咨询

核心问题 #

realm.objects('Category')返回的是Realm.Results类型，它是类数组对象但并非标准JavaScript数组，FlatList无法直接识别渲染。同时原代码中FlatList的title属性赋值也存在错误。

解决方案 #

1. 将Realm.Results转换为标准数组

使用Array.from()或扩展运算符[...results]，把Realm返回的类数组对象转为FlatList可识别的标准数组。如果需要实时同步数据库数据变化，还可以添加监听事件。

修改后的useEffect代码：

const [categories, setcategories] = useState( [] );

useEffect( () => {
    Realm.open( {
        path: 'myrealm.realm',
        schema: [CategorySchema],
    } ).then( ( realm ) => {
        const realmCategories = realm.objects( 'Category' );
        // 转换为标准数组并更新state
        const categoriesArray = Array.from(realmCategories);
        setcategories( categoriesArray );

        // 可选：添加监听，实现数据变化时自动刷新FlatList
        const dataChangeListener = realmCategories.addListener((changes) => {
            setcategories(Array.from(changes.objects));
        });

        // 组件卸载时清理资源
        return () => {
            realmCategories.removeListener(dataChangeListener);
            realm.close();
        };
    } );
}, [] );

2. 修复FlatList的渲染逻辑

原代码中title={ itemData.item }错误地将整个Category对象传给title属性，需要改为取对象的category_name字段：

<FlatList
    data={ categories }
    keyExtractor={ ( item ) => item.id }
    renderItem={ ({ item }) => (
        <CategoryCard
            onPress={ navigateToAllDocuments }
            title={ item.category_name }
        />
    ) }
/>

额外说明 #

• Realm.Results是实时查询结果，数据库中Category数据新增/修改/删除时会自动更新。不需要实时同步的话，直接转换数组即可；若要实时刷新UI，保留监听逻辑即可。
• 组件卸载时务必移除监听并关闭Realm实例，避免内存泄漏。

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