メッセージの送信時にチャットが2回表示されてしまう(React Native)

メッセージを送信すると、以下のようにチャットが2回表示されてしまいます。

色々なサイトを参考にしているのでコードがぐちゃぐちゃですが、
ご教授いただければ幸いです。

React
1import React, { useState,useEffect,useCallback } from 'react';
2import { GiftedChat, Bubble } from 'react-native-gifted-chat';
3
4export default function TalkScreen() {
5  
6  const [talk, setTalk] = useState([]);
7  const [messages, setMessages] = useState([]);
8  
9  useEffect(() => {
10    
11  /////////////////////////////////////////
12  // fetchでDBから情報を取得してtalkにセット
13  setTalk(json);
14　/////////////////////////////////////////
15
16　},[])
17  
18  useEffect(() => {
19
20    // 表示を左右に分けるためにIDを割り振る
21    const msg = talk.map(com => {
22
23      
24      if (com.speaker === 'A') {
25
26        const data = {
27          _id: 1,
28          text: com.note,
29          createdAt: com.time,
30          user: {
31            _id: 2,
32            name: com.speaker,
33            avatar:null,
34          }
35        }
36        return data;
37
38      }else if (com.speaker === 'B') {
39
40        const data = {
41          _id: 1,
42          text: com.note,
43          createdAt: com.time,
44          user: {
45            _id: 1,
46            name: com.speaker,
47            avatar:null,
48          }
49        }
50        return data;
51
52      }
53    });
54
55    // 割り振ったメッセージをmessagesにセット
56    setMessages(msg);
57
58  }, [talk])
59  
60  const renderBubble = .......  // ↑で割り振ったバブルの設定
61  
62　// 送信ボタンを押した処理
63  function onSend(newMessage = []) {
64    setMessages(GiftedChat.append(messages, newMessage));
65  }
66  
67  return (
68    <GiftedChat
69      messages={messages}
70      onSend={newMessage => onSend(newMessage)}
71      placeholder="テキストを入力してください"
72      renderBubble={renderBubble}
73      user={{_id: 1}}
74    />
75  );
76}
77

行動規範の内容に同意します

回答1件

自己解決

左右で割り振る際の_idを固定ではなくランダム化したら解決しました。

React
1const data = {
2  //////////////////変更箇所/////////////////
3  _id:  Math.round(Math.random() * 1000000),
4  //////////////////////////////////////////
5  text: com.note,
6  createdAt: com.time,
7  user: {
8    _id: 2, //←は固定で大丈夫でした
9    name: com.speaker,
10    avatar:null,
11  }
12}