Javascript React Native Gifted Chat+；Firestore-消息逐个呈现，而不是同时呈现

预期行为：聊天中的所有消息同时无缝呈现

观察到的行为：在安装组件或发送新消息时，消息消失，然后按时间顺序逐个重新呈现。以下是当前行为的gif：

我相当确定这与我如何处理firestore和组件状态之间的交互有关，但我不确定如何继续

export default class Chat extends React.Component {

state = {
  messages: [],
  currentUser: null,
  chatID: '',
  courseTitle: ''
};

componentDidMount(){
    // get user info from firestore
    let user = firebase.auth().currentUser._user
    firestore().collection("users").doc(user.uid).get().then(doc => {
        data = doc.data()
        this.setState({currentUser: {
            name: data.name,
            email: data.email,
            avatar: data.avatar,
            _id: doc.id,
        }})
    })

    // make a call to firestore to retrieve the chat data
    let chatID = this.props.navigation.state.params.id
    this.setState({chatID: chatID})
    firestore().collection("chats").doc(chatID).onSnapshot((doc) => {
        this.setState({ messages: [], courseTitle: doc.data().courseTitle })
        let newArray = []
        doc.data().messages.map(item => {
            firestore().collection("messages").doc(item).onSnapshot((doc) => {
                let message = doc.data()
                message['_id'] = doc.id
                newArray.push(message)
                this.setState(previousState => ({
                    messages: GiftedChat.append(previousState.messages, message)
                }))
            })
        })
    })
}

 get user() {
    currentUser = this.state.currentUser
    return {
        name: currentUser.name,
        email: currentUser.email,
        avatar: currentUser.avatar.uri,
        _id: currentUser._id
    };
}

get timestamp() {
    return firebase.database.ServerValue.TIMESTAMP;
}

onSend(messages = []) {
    for (let i = 0; i < messages.length; i++) {
        const { text, user } = messages[i];
        const message = {
            text,
            user,
            timestamp: this.timestamp,
        };

       firestore().collection("messages").add(message).then((doc) => {
            const id = doc.id
            firestore().collection("chats").doc(this.state.chatID).update({
                messages: firestore.FieldValue.arrayUnion(id)
            })
       })
    }
}

goBack = () => {
    this.props.navigation.goBack()
}

render() {
  return (
    <>
    {this.state.currentUser ?
        <>
        <BackHeader title={this.state.courseTitle} command={this.goBack} titleSize={12} />
        <GiftedChat
        showUserAvatar={true}
        renderUsernameOnMessage={true}
        messages={this.state.messages}
        onSend={messages => this.onSend(messages)}
        user={this.user}
        />
        </>
    : null }
    </>
  );
}
}

导出默认类Chat.Component{
状态={
信息：[]，
当前用户：null，
chatID:“”，
课程主题：''
};
componentDidMount（）{
//从firestore获取用户信息
让user=firebase.auth（）.currentUser.\u user
firestore（）.collection（“users”）.doc（user.uid）.get（）.then（doc=>{
data=doc.data（）
此.setState（{currentUser:{
name:data.name，
电子邮件：data.email，
阿凡达：data.avatar，
_id:doc.id，
}})
})
//致电firestore以检索聊天数据
让chatID=this.props.navigation.state.params.id
this.setState（{chatID:chatID}）
firestore（）.collection（“chats”）.doc（chatID）.onSnapshot（（doc）=>{
this.setState（{messages:[]，courseTitle:doc.data（）.courseTitle}）
让newArray=[]
doc.data（）.messages.map（项=>{
firestore（）.collection（“messages”）.doc（item）.onSnapshot（（doc）=>{
let message=doc.data（）
消息[''u id']=doc.id
newArray.push（消息）
this.setState（previousState=>({
消息：giftechat.append（previousState.messages，message）
}))
})
})
})
}
获取用户（）{
currentUser=this.state.currentUser
返回{
名称：currentUser.name，
电子邮件：currentUser.email，
化身：currentUser.avatar.uri，
_id:currentUser.\u id
};
}
获取时间戳（）{
返回firebase.database.ServerValue.TIMESTAMP；
}
onSend（消息=[]）{
for（设i=0；i{
const id=doc.id
firestore（）.collection（“chats”）.doc（this.state.chatID）.update({
消息：firestore.FieldValue.arrayUnion（id）
})
})
}
}
戈巴克=（）=>{
this.props.navigation.goBack（）
}
render（）{
返回(
{this.state.currentUser？
this.onSend（messages）}
user={this.user}
/>
：null}
);
}
}

您好，您还在寻找解决方案吗？请告诉我您找到了解决方案！会帮我大忙的@我刚才问了一个相关的问题，如果你知道答案的话！只需查看我的个人资料：）@kalculated我是使用API而不是firestore获得的，而且我无法在你的个人资料中找到你所指的问题我能够解决这个问题@哈希特马达夫