解决链接之后上级组件re-render; 获取loginUser

src/views/AuthApp.jsx

@@ -13,7 +13,6 @@ import 'dayjs/locale/zh-cn'
 import 'react-chat-elements/dist/main.css'
 import '@/assets/App.css'
 import AppLogo from '@/assets/logo-gh.png'
-import { isEmpty } from '@/utils/commons'
 
 const { Header, Footer, Content } = Layout
 const { Title } = Typography
@@ -42,16 +41,16 @@ function AuthApp() {
     token: { colorBgContainer },
   } = theme.useToken()
 
-  const { connectWebsocket, disconnectWebsocket, fetchInitialData } = useConversationStore();
+  const { userId } = loginUser;
   useEffect(() => {
-    if (loginUser && loginUser.userId) {
+    if (userId) {
-      connectWebsocket(loginUser.userId);
+      useConversationStore.getState().connectWebsocket(userId);
-      fetchInitialData(loginUser.userId);
+      useConversationStore.getState().fetchInitialData(userId);
     }
     return () => {
-      disconnectWebsocket();
+      useConversationStore.getState().disconnectWebsocket();
     }
-  }, [loginUser.userId]);
+  }, [userId]);
 
   return (
     <ConfigProvider
@@ -109,10 +108,10 @@ function AuthApp() {
                     trigger={['click']}
                   >
                     <a onClick={(e) => e.preventDefault()} style={{ color: colorPrimary }}>
-                      <Space><Avatar  
+                      <Space><Avatar
                       style={{
                         backgroundColor: colorPrimary,
-                      }} 
+                      }}
                       src={loginUser.avatarUrl}>{loginUser.username.substring(1)}</Avatar>{loginUser.username}<DownOutlined />​</Space>
                     </a>
                   </Dropdown>

src/views/Conversations/Components/ConversationsList.jsx

@@ -2,11 +2,11 @@ import { useEffect, useState } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import { Button, Dropdown } from 'antd';
 import { MoreOutlined } from '@ant-design/icons';
-import { useAuthContext } from '@/stores/AuthContext';
 import { fetchOrderConversationsList, fetchConversationItemClose, fetchMessages } from '@/actions/ConversationActions';
 import { ChatList, ChatItem } from 'react-chat-elements';
 import { isEmpty } from '@/utils/utils';
 import useConversationStore from '@/stores/ConversationStore';
+import useAuthStore from '@/stores/AuthStore'
 
 /**
  * []
@@ -16,10 +16,20 @@ const Conversations = () => {
   const { coli_guest_WhatsApp } = orderRow || {};
   const { order_sn } = useParams();
   const navigate = useNavigate();
-  const { loginUser } = useAuthContext();
+  const { loadUser } = useAuthStore();
+  const loginUser = loadUser();
   const { userId } = loginUser;
-  const { initialState, activeConversations, currentConversation, conversationsList, addToConversationList, delConversationitem, setCurrentConversation, receivedMessageList, setMsgLoading } =
+  const {
-    useConversationStore();
+    initialState,
+    activeConversations,
+    currentConversation,
+    conversationsList,
+    addToConversationList,
+    delConversationitem,
+    setCurrentConversation,
+    receivedMessageList,
+    setMsgLoading,
+  } = useConversationStore();
 
   const [switchToC, setSwitchToC] = useState({});
   const [shouldFetchCList, setShouldFetchCList] = useState(true);

src/views/Conversations/Components/Input/Template.jsx

@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import { App, Popover, Flex, Button, List, Input } from 'antd';
 import { MessageOutlined, SendOutlined } from '@ant-design/icons';
-import { useAuthContext } from '@/stores/AuthContext';
+import useAuthStore from '@/stores/AuthStore'
 import useConversationStore from '@/stores/ConversationStore';
 import { cloneDeep, getNestedValue, objectMapper } from '@/utils/utils';
 import { v4 as uuid } from 'uuid';
@@ -24,7 +24,8 @@ const splitTemplate = (template) => {
 const InputTemplate = ({ disabled = false, invokeSendMessage }) => {
   const searchInputRef = useRef(null);
   const { notification } = App.useApp();
-  const { loginUser } = useAuthContext();
+  const { loadUser } = useAuthStore();
+  const loginUser = loadUser();
   const { currentConversation, templates } = useConversationStore();
   // 用于替换变量: customer, agent
   const valueMapped = { ...cloneDeep(currentConversation), ...objectMapper(loginUser, { username: [{ key: 'agent_name' }, { key: 'your_name' }] }) };

src/views/Conversations/Components/InputComposer.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Input, Flex, Button, } from 'antd';
 // import { Input } from 'react-chat-elements';
-import { useAuthContext } from '@/stores/AuthContext';
+import useAuthStore from '@/stores/AuthStore'
 import useConversationStore from '@/stores/ConversationStore';
 import { SendOutlined, MessageOutlined, SmileOutlined, PictureOutlined, CommentOutlined, UploadOutlined, CloudUploadOutlined, FolderAddOutlined, FilePdfOutlined, CloseCircleOutlined } from '@ant-design/icons';
 import { isEmpty } from '@/utils/utils';
@@ -12,7 +12,8 @@ import InputImageUpload from './Input/ImageUpload';
 import dayjs from 'dayjs';
 
 const InputBox = () => {
-  const { loginUser } = useAuthContext();
+  const { loadUser } = useAuthStore();
+  const loginUser = loadUser();
   const { userId } = loginUser;
   const { websocket, websocketOpened, currentConversation, referenceMsg, setReferenceMsg, sentOrReceivedNewMessage } = useConversationStore();
   const [textContent, setTextContent] = useState('');