时间戳

首页 > 解决方案 > 天才聊天杂乱无章的消息

javascript - 天才聊天杂乱无章的消息

问题描述

我遇到了 GiftedChat 的问题，消息在应用程序中显得完全杂乱无章，甚至直接从火力库（正确的地方）寻找消息，应用程序没有得到逻辑顺序。组织发送时，但问题在于加载消息时。我完全迷失了

loadMessages = async () => {
        const { user } = this.props;
        const matchId = this.props.navigation.getParam('matchId');
        const data = (await firebase.database().ref(`matchs/${matchId}/messages`).limitToLast(300).once('value')).val();

        let messages = [];
        if(data){
          Object.keys(data)
            .forEach(messageId => {
              let message = data[messageId];

              if(_.get(message, 'user._id') !== user.uid) _.push(message);
              messages.push(message);

            });
        }


        this.setState(() => ({
          messages,
        }));

      }

我的 JSON：

{
  "-LkAMYoS3fySk46Pbpan" : {
    "_id" : "f5ba3d9a-c346-4f79-b371-c5d54798567e",
    "createdAt" : 1563558815857,
    "text" : "First message",
    "user" : {
      "_id" : "BVY4MDwSaaSDI2bAGjwkZlYktsK2",
      "avatar" : "https://firebasestorage.googleapis.com/v0/b/wefound-760f2.appspot.com/o/users%2FBVY4MDwSaaSDI2bAGjwkZlYktsK2%2Fphotos%2Fk1xuqv26wdrjxoxmp8m.jpg?alt=media&token=7c16a0e4-2cb8-45a5-83a4-635d49c71180",
      "name" : "Rafael"
    }
  },
  "-LkAMZiITDxHE1WfCBGC" : {
    "_id" : "c2755b48-136d-4a68-b283-377ebac7df8e",
    "createdAt" : 1563558819564,
    "text" : "Second message",
    "user" : {
      "_id" : "BVY4MDwSaaSDI2bAGjwkZlYktsK2",
      "avatar" : "https://firebasestorage.googleapis.com/v0/b/wefound-760f2.appspot.com/o/users%2FBVY4MDwSaaSDI2bAGjwkZlYktsK2%2Fphotos%2Fk1xuqv26wdrjxoxmp8m.jpg?alt=media&token=7c16a0e4-2cb8-45a5-83a4-635d49c71180",
      "name" : "Rafael"
    }
  },
  "-LkAM_l4o_w_QeCsYRc8" : {
    "_id" : "65772152-afd9-4353-b752-ac65978a536d",
    "createdAt" : 1563558823838,
    "text" : "Third message",
    "user" : {
      "_id" : "BVY4MDwSaaSDI2bAGjwkZlYktsK2",
      "avatar" : "https://firebasestorage.googleapis.com/v0/b/wefound-760f2.appspot.com/o/users%2FBVY4MDwSaaSDI2bAGjwkZlYktsK2%2Fphotos%2Fk1xuqv26wdrjxoxmp8m.jpg?alt=media&token=7c16a0e4-2cb8-45a5-83a4-635d49c71180",
      "name" : "Rafael"
    }
  },
  "-LkAMcSSTOP7L1CwyiU4" : {
    "_id" : "e69f3a72-0f4e-4c06-a763-518ef1984aa0",
    "createdAt" : 1563558834859,
    "text" : "Fourth message",
    "user" : {
      "_id" : "BVY4MDwSaaSDI2bAGjwkZlYktsK2",
      "avatar" : "https://firebasestorage.googleapis.com/v0/b/wefound-760f2.appspot.com/o/users%2FBVY4MDwSaaSDI2bAGjwkZlYktsK2%2Fphotos%2Fk1xuqv26wdrjxoxmp8m.jpg?alt=media&token=7c16a0e4-2cb8-45a5-83a4-635d49c71180",
      "name" : "Rafael"
    }
  },
  "-LkAMduvBrEnUG6POGKt" : {
    "_id" : "897b2042-25dc-46ec-a5f3-5bdc1fc355dd",
    "createdAt" : 1563558840853,
    "text" : "Fifth message",
    "user" : {
      "_id" : "BVY4MDwSaaSDI2bAGjwkZlYktsK2",
      "avatar" : "https://firebasestorage.googleapis.com/v0/b/wefound-760f2.appspot.com/o/users%2FBVY4MDwSaaSDI2bAGjwkZlYktsK2%2Fphotos%2Fk1xuqv26wdrjxoxmp8m.jpg?alt=media&token=7c16a0e4-2cb8-45a5-83a4-635d49c71180",
      "name" : "Rafael"
    }
  }
}

在此处输入图像描述

我在消息中给出了console.tron.log（），它们看起来杂乱无章，在应用程序中完全相同，问题出在组件中？

1 - 指加载消息的函数。

2 - JSON 文件

标签： javascriptreactjsfirebasefirebase-realtime-database

解决方案

排序数据有两个步骤：

  1. 告诉 Firebase 数据库服务器以正确的顺序返回子节点。
  2. 在您的客户端代码中维护该顺序。

据我所知，您的代码都没有这些，这意味着节点以您的客户端用于 JSON 属性的任何顺序结束（根据定义，这些属性是无序的）。

我们先看看如何从 Firebase 中以正确的顺序检索数据：

const snapshot = (await firebase.database().ref(`matchs/${matchId}/messages`).orderByChild('createdAt').limitToLast(300).once('value'));

上面按属性值对所有子节点进行createdAt排序，然后将最后的 300 依次返回给客户端。

你会注意到我还没有val()在这里打电话。原因是它snapshot.val()返回一个 JSON 对象，而 JSON 对象中的属性没有定义的顺序。因此，如果您调用.val()得太早，您将丢失服务器返回的订购信息。

接下来是在客户端代码中处理它们以不丢失该顺序，这取决于使用DataSnapshot.forEach()：

data.forEach((message) => {
  messages.push(message.val());
})

推荐阅读