Javascript 未从firebase数据库内的返回获取数据

我从firebase获取数据，但能够在emulator上获取数据。我尝试使用consloe，但效果很好

const Getdata = async () => {
    await firebase.database().ref(`/orders/${user1.uid}`)
    .on("child_added", (snapshot, key) => {
        if(snapshot.key) {
            console.log('key',snapshot.key);
            let grabbedData = snapshot.val().orders;
            grabbedData.map((order, i) => {
                console.log('order',order.id);
                console.log('order',order.avatar);
                console.log('order',order.name);
                console.log('order',order.price);
                console.log('----------------');
            });
        }
        
    });
}
Getdata();

将上述代码修改为以下代码后，屏幕上不会显示任何内容

const Getdata = () => {
        let data = firebase.database().ref(`/orders/${user1.uid}`)
            .on("child_added", (snapshot, key) => {
             // something is wrong with this below statememnt I think
                return (
                    <Card>
                        <Text>{snapshot.key}</Text>
                        {
                            snapshot.val().orders.map((order, i) => {
                                return (
                                    <TouchableOpacity  key={i} onPress={() => {
                                    }}>
                                        <Card>
                                            <View style={styles.user}>
                                            <Image
                                                style={styles.image}
                                                resizeMode="cover"
                                                source={{ uri: order.avatar }}
                                            />
                                            <View style={{flexDirection:'column', flex: 1}}>
                                                <Text style={styles.name} h4>{order.name}</Text>
                                                <Card.Divider style={{ marginTop: 25}}/>
                                                <View style={{flexDirection:'row', flex: 1,justifyContent: 'space-between'}}>
                                                <Text style={styles.price}>{order.price}</Text>
                                                </View>
                                            </View>
                                            </View>
                                        </Card>
                                    </TouchableOpacity>
                                );
                            })
                        }
                    </Card>

                )
                    
                
        })
        return data;
    }

and then <Getdata/>

const Getdata=（）=>{
让data=firebase.database（）.ref（`/orders/${user1.uid}`）
.on（“添加了子项）”，（快照，键）=>{
//我想下面的陈述有点不对劲
返回(
{snapshot.key}
{
snapshot.val（）.orders.map（（订单，i）=>{
返回(
{
}}>
{order.name}
{订单价格}
);
})
}
)
})
返回数据；
}
然后

我的第一个退货状态有问题，但不知道是什么。 编辑我正在添加pic如何组织数据

const [orders, setOrders] = useState([]); // initially empty
const [key, setKey] = useState(undefined); // undefined empty

const Getdata = async () => {
    await firebase.database().ref(`/orders/${user1.uid}`)
    .on("child_added", (snapshot, key) => {
        if(snapshot.key) {
            console.log('key',snapshot.key);
            let grabbedData = snapshot.val().orders;
            setKey(snapshot.key); // set key here
            setOrders(grabbedData); // set orders here to state, it will rerender
        }
        
    });
}

useEffect(() => {
    Getdata();
});


return (
                    <Card>
                        {key && <Text>{snapshot.key}</Text>}
                        {
                            orders.map((order, i) => {
                                return (
                                    <TouchableOpacity  key={i} onPress={() => {
                                    }}>
                                        .........
                                    </TouchableOpacity>
                                );
                            })
                        }
                    </Card>

)

const[orders，setOrders]=useState（[]）；//最初是空的
常量[key，setKey]=useState（未定义）；//未定义的空
const Getdata=async（）=>{
等待firebase.database（）.ref（`/orders/${user1.uid}`）
.on（“添加了子项）”，（快照，键）=>{
if（snapshot.key）{
console.log（'key'，snapshot.key）；
让grabbedData=snapshot.val（）.orders；
setKey（snapshot.key）；//在此处设置密钥
setOrders（grabbedData）；//将此处的订单设置为状态，它将重新启动
}
});
}
useffect（（）=>{
Getdata（）；
});
返回(
{key&&{snapshot.key}
{
orders.map（（order，i）=>{
返回(
{
}}>
.........
);
})
}
)

on（）

既不返回承诺，也不返回数据。因此，您在这两种情况下使用它的方式都是不正确的。您的意思是使用

once（）

，它确实会返回数据库数据的承诺吗？但是使用once只获取数据一次，并且希望它是实时的。您必须选择是否希望函数返回数据或侦听是实时的。你不能用同一个API同时做这两件事。Thnx这很有效，但它会打印最后一个对象的内容，剩下的内容被排除在外。为了更好地理解，我添加了图片