实时数据库+天才聊天多次渲染答案

【问题标题】：Real-time database + Gifted Chat rendering many times实时数据库+天才聊天多次渲染
【发布时间】：2021-11-09 21:57:31
【问题描述】：

我正在尝试使用 Gifted Chat 和 firebase 实时数据库进行用户对用户的聊天。在第一个屏幕渲染上，我从数据库中检索所有消息。然后当我向数据库发送一条新消息时，屏幕会重新呈现，我将再次检索消息，我该如何阻止这种情况发生？

Example:
Database {Message1: Hi}
First screen render {Hi}
Send message{ Message2: Hello} 
Database {Message1: Hi, Message2:Hello}
Second screen render {Hi, Hello, Hi, Hello, Hi}

useLayoutEffect(() => {
    getUser();
    // for real time update
    const unsubscribe = database()
      .ref('100-101/')
      .on('value', snapshot => {
        console.log(snapshot);
        var y = [];
        snapshot.forEach(doc => {
          y.push({
            _id: doc.val()._id,
            createdAt: doc.val().createdAt,
            text: doc.val().message,
            user: user,
          });
        });
        for (var x in y) {
          setMessages(previousMessages =>
            GiftedChat.append(previousMessages, y[x]),
          );
        }
      });
    return () => unsubscribe();
  }, []);
       
  

  const onSend = useCallback((msgs = []) => {
        setMessages(previousMessages => GiftedChat.append(previousMessages, msgs));
        var time = new Date().getTime();
        for (let i = 0; i < msgs.length; i++) {
          database().ref('100-101/').push({
            _id: msgs[i]._id,
            message: msgs[i].text,
            user: msgs[i].user.uid,
            createdAt: time,
          });
        }
      }, []);

【问题讨论】：

标签： reactjs firebase react-native firebase-realtime-database react-native-gifted-chat

【解决方案1】：

编辑：我能够通过使用 child_added 并仅从数据库而不是从客户端添加到屏幕来使其工作。

  useLayoutEffect(() => {
    getUser();
    const unsubscribe = database()
      .ref('100-101/')
      .on('child_added', snapshot => {
        var y = [];

        y.push({
          _id: snapshot.val()._id,
          createdAt: snapshot.val().createdAt,
          text: snapshot.val().message,
          user: user,
        });
        setMessages(previousMessages => GiftedChat.append(previousMessages, y));
      });
    return () => unsubscribe();
  }, []);

  const onSend = useCallback((msgs = []) => {
    var time = new Date().getTime();
    for (let i = 0; i < msgs.length; i++) {
      database().ref('100-101/').push({
        _id: msgs[i]._id,
        message: msgs[i].text,
        user: msgs[i].user.uid,
        createdAt: time,
      });
    }
  }, []);

【讨论】：