react-native-gifted-chat 多次顯示相同的消息

Question

我在我的 react-native 應用程序中使用react-native-gifted-chat 。 正如我在此圖像中所示，多次顯示相同的消息和message: Yes getting new msg的位置也與其實際位置不同。 我的問題和這個一樣。 誰能幫我解決這個問題。

先感謝您。

Answer 1

我得到了我的問題的解決方案。 @Ron 你是對的，但就我而言，問題是不同的。 我通過更改參數格式解決了這個問題。 它采用了不同的格式，我通過了不同的格式，所以它們相互沖突。 這是可能對其他人有用的解決方案。

parse = snapshot => {
    const { timestamp: numberStamp, text } = snapshot.val();
    const { key: _id } = snapshot;
    const createdAt = moment(snapshot.val().createdAt, "DD/MM/YYYY hh:mm:ss");

     const user = { };
     var temp_data = snapshot.val()
     if(snapshot.val().name == this.state.temp_logged_name) {
         user._id = 1; 
         user.name = temp_data.name;
         user.avatar = temp_data.avatar;
     }
     const message = {
        _id,
        createdAt,
        text,
        user,
     };
     return message;
};

Answer 2

我也遇到過這個問題。 我已經在我的移動應用程序上設置了react-native-gifted-chat 。 在另一端，我設置了一個簡單的 HTML 頁面，其中包含一個腳本來初始化 Websocket 連接並在onsend事件上發送消息。 后來我意識到，雖然唯一 ID 是在應用程序端生成的（因為該 ID 是由庫本身生成的），但另一端不存在此類內容。

基本上，當消息缺少唯一 id _id時，就會出現這種奇怪的行為。 在執行GiftedChat.append(previousMessages, messages)時，每條消息必須至少具有以下屬性。

      {
        _id: 1,
        text: 'Hello developer',
        createdAt: new Date(),
        user: {
          _id: 2
        }
      }

Answer 3

背后可能有兩個原因，

1) 每條消息都應該傳遞一個唯一的 id，所以只需使用uuidv4 npm 包並將其附加到對象的_id prop。

例子：

messages: GiftedChat.append(previousState.messages, {
              _id: uuidv4(), // or use  Math.round(Math.random() * 1000000)
              text: text,
              createdAt: new Date(),
              user: {
                _id: 2,
                name: "React Native",
                avatar: "https://placeimg.com/140/140/any"
              },
              image: attachment
            })

2）第二種可能性可能是在您用來啟動用戶之間聊天的網關上。 因此，某些網關存在多次重復消息的已知問題。 您可以在每次收到新消息並將其推送到聊天屏幕時進行字符串比較，但不建議這樣做。

Answer 4

我通過簡單地將過濾器應用於 useLayout Effect 中的傳入消息來解決這個問題：

 useLayoutEffect(() => { db.collection('Chats').doc(docID).collection('messages').orderBy("createdAt", "desc").onSnapshot(snapshot => { setMessages( prev => prev.filter((ftr,index,self) => ftr?.user?._id?== loginUser..id) //login user id is the current user's id you can do the same for recieved messages.concat (snapshot.docs.map(doc => doc:data({ _id? doc.,id: user. doc.data(),user: text. doc.data(),text: createdAt.new Date(doc.data(),createdAt), }) )) ) }) },[])

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>