react-native - 带有反应本机无限循环的firebase实时数据库查询

Question

Firebase RTDB 如下所示：

users / userID / email, 
                 username, 
                 id,
                 posts/ id / id,
                             timestamp,
                             messages: String
                      / id /  id,
                             timestamp,
                             messages: String
                     / id /  id,
                             timestamp,
                             messages: String
  

所以我试图遍历帖子下的 id 并检索所有消息，将所述消息推送到数组并使用 Flatlist 组件呈现它们。

我只是想知道是否有人可以指出这段代码会导致无限循环吗？我不知所措。

import React, {useState} from 'react'
import { StyleSheet, FlatList, View, Text } from 'react-native'

import firebase from 'firebase'
import "firebase/database"

interface userObjectProp {
    userCredentials: Object,
}

const YourMessages = ({userCredentials}: userObjectProp) => {

    const [messages, setMessages] = useState(Array)
    
    firebase.database().ref("users/" + userCredentials.id + "/posts").on("value", (snapshot)=> {
        snapshot.forEach((childSnapshot)=> {
            setMessages(messages=>[...messages, childSnapshot.child("message").val()])
        })
    })
    
    const renderItem = ({item}: any)=> {
        return (
            <Text>{item}</Text>
        )
    }

    return (
        <View>
            <FlatList data={messages} renderItem={renderItem} extraData={messages}/>
        </View>
    )
}

回答@Dharmaraj，它是这个屏幕组件的子组件：ChatScreen。

import React, {useState, useEffect} from 'react'
import { StyleSheet, View, TextInput, Text, TouchableOpacity } from 'react-native'
import globalStyle from '../css/globalStyle'

import Logout from '../components/Logout'
import YourMessages from '../components/chatScreen/YourMessages'
import RecievedMessages from '../components/chatScreen/RecievedMessages'
import SendText from '../components/chatScreen/SendText'

import {Props} from "../types/types"

const ChatScreen = ({route}: Props) => {

    const userObject = route.params.user

    const [input, setUserInput] = useState(String)

    return (
        <View style={styles.container}>
            <Logout/>
            <View style={styles.chatWindow}>
                 <YourMessages userCredentials={userObject}/>
                <View><RecievedMessages/></View> 
            </View>
            <View style={styles.chatAndButton}>
                <TextInput onChangeText={setUserInput} value={input} style={styles.textInput} placeholder="Chat..."/>
                <SendText message={input} userCredentials={userObject} />
            </View>
        </View>
    )
}

标签： react-nativefirebase-realtime-databaseexporeact-native-flatlist