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 => ({
-    ...message,
-    key: message.id,
-    position: message.sender === 'me' ? 'right' : 'left',
-    onOpen: () => handlePreview(message),
-    ...(message.sender === 'me' ? {
-      styles: { backgroundColor: '#ccd4ae' } ,
-      notchStyle: { fill: '#ccd4ae'},
-      replyButton: ['text'].includes(message.whatsapp_msg_type) && message.status !== 'failed' ? true : false,
-      onReplyClick: () => (setReferenceMsg(message)),
-      className: 'whatsappme-container whitespace-pre-wrap',
-    } : {
-      replyButton: ['text'].includes(message.whatsapp_msg_type) ? true : false,
-      onReplyClick: () => (setReferenceMsg(message)),
-    }),
-  })), [activeMessages, currentConversation.sn]);
+  const messagesList = useMemo(
+    () =>
+      (activeMessages || []).map((message) => ({
+        ...message,
+        key: message.id,
+        position: message.sender === 'me' ? 'right' : 'left',
+        ...(message.sender === 'me'
+          ? {
+              styles: { backgroundColor: '#ccd4ae' },
+              notchStyle: { fill: '#ccd4ae' },
+              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,
+            }),
+      })),
+    [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}
-          {...message}
-        />
+        <MessageBox key={message.key} {...message} onReplyClick={() => setReferenceMsg(message)} onOpen={() => handlePreview(message)} />
       ))}
       <Image src={previewSrc} preview={{ visible: previewVisible, src: previewSrc, onClose: onPreviewClose }} />
       <div ref={messagesEndRef}></div>