我正試圖設計一個在react中使用套接字的聊天應用程式。每當從后端觸發new_message事件時，我試圖將該訊息追加到現有的訊息陣列中，但似乎這不起作用。
以下是我嘗試的代碼：
useEffect(( ) => {
插座。 on("new_message", (data) => { //接收事件并將新訊息附加在現有的訊息陣列中。
setConversation([...conversation, data.message)。
});
});
useEffect(() => {
socket.emit("join_room", lead._id) 。
if (lead._id !== undefined) {
getConversationByRoomId(lead._id).then(({ data }) => //span>
setConversation(data.conversation)
);
}
}, [lead])。
const handleKeyPress = async（e）=> {
if (e.key =="enter") {
await postMessage(led. _id, { messageText: message }); //API，它將在資料庫中保存這個訊息并觸發一個名為new_message的事件到socket。
setMessage(""/span>)。
}
};
不知為何，它只在對話陣列中添加新的訊息，而洗掉了所有其他的對話。怎樣才能解決這個問題呢？
uj5u.com熱心網友回復：
根據你在問題中給出的資訊，我認為首先要改變和觀察的是socket.on的實作方式。我不會在每次發生狀態更新時都系結一個新的事件處理程式，而且也不會在清理函式中洗掉之前的事件處理程式。
通過利用state updator函式，嘗試用下面的方法進行處理：-
useEffect(() =>/span> {
socket.on("new_message", (data) => {
setConversation(span class="hljs-params">prevConversation=>[...prevConversation, data.message]) 。
});
},[]);
還要確保getConversationByRoomId實際上是按照你的意圖回傳整個conversation陣列，在狀態中設定相同的值之前記錄它的值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/334232.html
標籤：