-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
데이터 질문이요
23.05.07 17:43 작성 조회수 268
0
const onSubmitForm = useCallback(
(e) => {
e.preventDefault();
if (chat?.trim() && chatData) {
const savedChat = chat;
mutateChat((prevChatData) => {
prevChatData?.[0].unshift({
id: (chatData[0][0]?.id || 0) + 1,
content: savedChat,
SenderId: myData.id,
Sender: myData,
ReceiverId: userData.id,
Receiver: userData,
createdAt: new Date(),
});
return prevChatData;
}, false).then(() => {
localStorage.setItem(`${workspace}-${id}`, new Date().getTime().toString());
setChat('');
if (scrollbarRef.current) {
console.log('scrollToBottom!', scrollbarRef.current?.getValues());
scrollbarRef.current.scrollToBottom();
}
});
axios
.post(`/api/workspaces/${workspace}/dms/${id}/chats`, {
content: chat,
})
.then(() => console.log('first'))
.catch(console.error);
}
},
[chat, workspace, id, myData, userData, chatData, mutateChat, setChat],
);
const onMessage = useCallback(
(data: IDM) => {
if (data.SenderId === Number(id) && myData.id !== Number(id)) {
mutateChat((chatData) => {
chatData?.[0].unshift(data);
return chatData;
}, false)
이부분은 socket?.on('dm', onMessage)
dm보내는 페이지에서 디엠을 보낼 때 onSubmitForm에서 mutate가 먼저 실행돼서 화면 데이터를 먼저 바꿔주고 그 다음 서버로 데이터를 보낸 뒤 처리하는 과정에서 socket.emit()이 실행되고 onMessage가 실행되는 걸로 이해했는데요. onMessage가 받는 데이터가 onSumbitForm의 mutate가 인자로 받는 함수랑 똑같아서 중복작업이 아닌가 싶어서 onMessage mutate 안의 chat.Data?.[0].unshift(data)를 지우고 실행해봐도 똑같은 결과가 나오는데 이 코드는 왜 있는 건가요?
답변을 작성해보세요.
답변 1