遇到两个 children 使用相同的密钥 - React Native Gifted Chat

Question

下面的代码运行得有点像我想要的。当我输入组件时，我能够获得正确的数据，但是一旦我发送一条消息，它就会复制以前的消息。我对 React Native 很陌生，所以只是学习。如有任何帮助或建议，我们将不胜感激！

1.) 在 Firebase 中的 'selectedUser（本地）== 字段 'to' 中获取文档。

2.) 显示找到的文档中的聊天记录。

3.) 向屏幕和 firebase 发送消息。

4.) 利润。

useEffect(() => {

    const q = query(collectionRef, orderBy('createdAt', 'desc'));

    const unsubscribe = onSnapshot(q, querySnapshot => {
      
      const id =  querySnapshot.docs.map(doc => ({
        _id: doc.data()._id,
        createdAt: doc.data().createdAt.toDate(),
        text: doc.data().text,
        user: doc.data().user,
        to: doc.data().to
        
      }))

      id.forEach((val)=>{

        if(val.to == selectedUser[0]){
          console.log(val.to)
          DATA.push({
          _id: val._id,
          createdAt: val.createdAt,
          text: val.text,
          user: val.user,
          to: val.to,
          }
          );
        }

      })
      // console.log(DATA)

      setMessages(DATA);
      // console.log(Message)
    });

    return () => unsubscribe();
  }, []);


  const onSend = useCallback((messages = []) => {
    const to = selectedUser.toString();
    const { _id, createdAt, text, user } = messages[0]
   

    addDoc(collection(db, 'Chats'), { _id, createdAt,  text, user, to });
}, []);



  return (
  <SafeAreaView style={styles.container}>
    <Text style={styles.ChattingWith}>Chatting with: {selectedUser[[0]]}</Text>


    <View style={styles.MainFeed}>

    <GiftedChat
            messages={messages}
            showAvatarForEveryMessage={true}
            onSend={messages => onSend(messages)}
            user={{
                _id: auth?.currentUser?.email,
                avatar: auth?.currentUser?.photoURL
            }}
        />

    </View>



  </SafeAreaView>
  )
}

调用 'onSend' 函数时 Firestore 的内容：

Answer 1

你能试试更换吗

       id.forEach((val)=>{

        if(val.to == selectedUser[0]){
          console.log(val.to)
          DATA.push({
          _id: val._id,
          createdAt: val.createdAt,
          text: val.text,
          user: val.user,
          to: val.to,
          }
          );
        }

      })
setMessages(DATA);

和

const newData = id.filter((val)=> val.to == selectedUser[0])
setMessages(newData);

遇到两个 children 使用相同的密钥 - React Native Gifted Chat

Encountered two children with the same key - React Native Gifted Chat

react-native

expo

react-native-gifted-chat

react-functional-component