Messages, 数组避免多余的属性和方法

src/views/Conversations/Components/Messages.jsx

@@ -6,24 +6,27 @@ import { useShallow } from 'zustand/react/shallow';
 
 const Messages = () => {
   const { currentConversation, setReferenceMsg } = useConversationStore();
-  const activeMessages = useConversationStore(useShallow(state => currentConversation.sn ? state.activeConversations[currentConversation.sn] : []));
+  const activeMessages = useConversationStore(useShallow((state) => (currentConversation.sn ? state.activeConversations[currentConversation.sn] : [])));
 
-  const messagesList = useMemo(() => (activeMessages || []).map(message => ({
+  const messagesList = useMemo(
-    ...message,
+    () =>
-    key: message.id,
+      (activeMessages || []).map((message) => ({
-    position: message.sender === 'me' ? 'right' : 'left',
+        ...message,
-    onOpen: () => handlePreview(message),
+        key: message.id,
-    ...(message.sender === 'me' ? {
+        position: message.sender === 'me' ? 'right' : 'left',
-      styles: { backgroundColor: '#ccd4ae' } ,
+        ...(message.sender === 'me'
-      notchStyle: { fill: '#ccd4ae'},
+          ? {
-      replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
+              styles: { backgroundColor: '#ccd4ae' },
-      onReplyClick: () => (setReferenceMsg(message)),
+              notchStyle: { fill: '#ccd4ae' },
-      className: 'whatsappme-container whitespace-pre-wrap',
+              replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
-    } : {
+              className: 'whatsappme-container whitespace-pre-wrap',
-      replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
+            }
-      onReplyClick: () => (setReferenceMsg(message)),
+          : {
-    }),
+              replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
-  })), [activeMessages, currentConversation.sn]);
+            }),
+      })),
+    [activeMessages, currentConversation.sn]
+  );
   console.log('messagesList----------------------------------------------------', messagesList);
 
   const messagesEndRef = useRef(null);
@@ -48,9 +51,7 @@ const Messages = () => {
   return (
     <div>
       {messagesList.map((message, index) => (
-        <MessageBox key={message.key}
+        <MessageBox key={message.key} {...message} onReplyClick={() => setReferenceMsg(message)} onOpen={() => handlePreview(message)} />
-          {...message}
-        />
       ))}
       <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
       <div ref={messagesEndRef}></div>