Question

我在GiftedChat中遇到问题，消息在应用程序中显得完全混乱，甚至直接从firebase（在正确的位置）查找消息，应用程序都没有逻辑顺序。发送是有组织的，但是问题是加载消息时。我完全迷路了

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"
    }
  }
}

enter image description here

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

1-指加载消息的功能。

2-JSON文件

Answer 1

订购数据有两个步骤：

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

据我所知，您的代码均不执行上述操作，这意味着节点按照您的客户端用于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());
})

Answer 2

最后，我可以通过基于日期和时间（CreatedAT）对来自服务器的JSON进行排序来解决此问题。如果JSON数据存储在名为“讨论”的变量中，则您的代码应为

      discussion.sort(function compare(a, b) {
        var dateA = new Date(a.createdAt);
        var dateB = new Date(b.createdAt);
        return dateB - dateA;
      });

在您的情况下，data或messages是保存JSON的那个。一旦获得JSON格式的代码，就添加此代码。

谢谢。

资优聊天混乱消息

2 个答案: