React Native启动时读取Realm数据库及组件错误解决咨询

我是Realm新手，尝试从数据库中读取数据。创建了名为_AppRegistry的对象模式，该模式仅有一条记录：存在则表示应用已加载过，反之则未加载。遵循MongoDB的Quick Start指南开发，但在RealmProvider标签内使用函数时出错，错误信息如下：

ERROR Invariant Violation: View config getter callback for component initialiseApp must be a function (received undefined). Make sure to start component names with a capital letter.

This error is located at:
in initialiseApp (created by App)
in Unknown (created by App)
in RCTView (created by View)
in View (created by App)
in App
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in ps2319(RootComponent), js engine: hermes

以下是主App函数代码：

const App = () => {
    //initDB();
    
    const {RealmProvider, useRealm, useObject, useQuery} = createRealmContext({schema: [_AppRegistry, Attachments, ReceiptAttachments, Receipts, ReceiptTags, Tags]});
    return (
        <RealmProvider>
            <initialiseApp />
        </RealmProvider>
    );
    
};

// Other code...

export default App;

我的initialiseApp函数代码：

function initialiseApp() {
    const appRegistry = useObject(_AppRegistry, 0);
    if(appRegistry == null){
        return(
            <View>
                <Text>App Registry is not set up!</Text>
            </View>
        );
    }else{
        return(
            <View>
                <Text>App Registry is set up!</Text>
            </View>
        );
    }
}

问题根源 #

React组件名称必须以大写字母开头，你定义的initialiseApp是小写开头，React会将其识别为原生HTML标签而非自定义组件，导致报错。

修复步骤 #

1. 重命名组件为大写开头：将initialiseApp改为InitialiseApp，同时在RealmProvider内使用<InitialiseApp />。
2. 确保Realm上下文钩子在Provider范围内使用：你的useObject钩子已经在组件内使用，这部分没问题，但组件名称修正后即可正常工作。

修复后的代码示例 #

主App函数：

const App = () => {
    //initDB();
    
    const {RealmProvider, useRealm, useObject, useQuery} = createRealmContext({schema: [_AppRegistry, Attachments, ReceiptAttachments, Receipts, ReceiptTags, Tags]});
    return (
        <RealmProvider>
            <InitialiseApp />
        </RealmProvider>
    );
    
};

// Other code...

export default App;

InitialiseApp组件：

function InitialiseApp() {
    const appRegistry = useObject(_AppRegistry, 0);
    if(appRegistry == null){
        return(
            <View>
                <Text>App Registry is not set up!</Text>
            </View>
        );
    }else{
        return(
            <View>
                <Text>App Registry is set up!</Text>
            </View>
        );
    }
}

额外说明 #

• 确认_AppRegistry模式的主键设置正确：useObject的第二个参数是主键值，你这里传的是0，需要确保_AppRegistry的主键字段类型匹配，且数据库中存在对应主键的记录（或你预期不存在时显示未设置）。
• 若需要初始化数据库（比如首次启动时创建_AppRegistry记录），可以在组件内使用useRealm钩子获取Realm实例，然后执行写入操作：

import { useEffect } from 'react';

function InitialiseApp() {
    const realm = useRealm();
    const appRegistry = useObject(_AppRegistry, 0);

    useEffect(() => {
        if (!appRegistry) {
            realm.write(() => {
                realm.create(_AppRegistry, { _id: 0 /* 补充你的其他字段 */ });
            });
        }
    }, [realm, appRegistry]);

    return (
        <View>
            <Text>{appRegistry ? "App Registry is set up!" : "Setting up App Registry..."}</Text>
        </View>
    );
}

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