React Native中如何将Firebase快照子节点转换为自定义对象？

1. 修正自定义模型的导出方式 #

你当前导出的是ObjectModel的实例，这会导致无法创建多个对象实例，应该直接导出类本身：

class ObjectModel {
    constructor(id, name, age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}

export default ObjectModel; // 导出类，而非实例

2. 将Firebase子节点转换为自定义对象实例 #

在useEffect的快照处理逻辑中，利用Firebase子节点的key作为对象ID，从child.val()中提取属性值，创建ObjectModel实例并组装成数组：

import ObjectModel from './path-to-your-model-file'; // 导入自定义类

// 在Screen.js的组件中
useEffect(() => {
    const reference = ...; // 你的Firebase节点引用
    
    // 定义数据变化监听回调
    const handleDataChange = (snapshot) => {
        // 遍历快照子节点，转换为自定义对象数组
        const dataArray = Array.from(snapshot.children()).map(child => {
            const nodeValues = child.val();
            return new ObjectModel(
                child.key,       // 使用Firebase节点的唯一key作为id
                nodeValues.name, // 提取name字段
                nodeValues.age   // 提取age字段
            );
        });
        setArr(dataArray);
    };

    // 启动监听
    reference.on('value', handleDataChange);

    // 组件卸载时取消监听，避免内存泄漏
    return () => {
        reference.off('value', handleDataChange);
    };
}, []); // 空依赖数组确保监听只初始化一次

3. 在FlatList中渲染自定义对象 #

现在状态数组arr中存储的都是ObjectModel实例，直接在FlatList中访问实例属性即可：

<FlatList
    data={arr}
    keyExtractor={(item) => item.id} // 使用自定义对象的id作为唯一key
    renderItem={({ item }) => (
        <View style={{ padding: 16, borderBottomWidth: 1 }}>
            <Text>ID: {item.id}</Text>
            <Text>姓名: {item.name}</Text>
            <Text>年龄: {item.age}</Text>
        </View>
    )}
/>

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