資優聊天混亂消息

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

我在消息中給出了console.tron.log（），它們看起來雜亂無章，完全相同於應用程序，問題出在組件上嗎？

1-指加載消息的功能。

2-JSON文件

Answer 1

排序數據有兩個步驟：

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()調用.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的data或messages 。 一旦獲得JSON格式的代碼，請添加此代碼。

謝謝。