我正在使用 react、express 和 socket.io 構建一個簡單的聊天應用程式。
每次客戶端向服務器發送訊息時，服務器都會將訊息廣播回給每個用戶。從后端服務器接收回訊息時出現問題。
每次用戶收到訊息時，useEffect都會運行兩次而不是只運行一次。
useEffect(() => {
socket.on("broadcast_msg", (data) => {
setMsg((list) => [...list, data]);
});
}, [socket]);
PS。后端服務器只向前端發送一次。感謝您的每一個回復：D
完整代碼
import React from "react";
import { useEffect } from "react";
import { useState } from "react";
function Chat(props) {
const { socket, username, room } = props;
const [input, setInput] = useState("");
const [msg, setMsg] = useState([]);
// send msg to server
const send_msg = (e) => {
if (input !== "") {
socket.emit("send_msg", {
room: room,
author: username,
message: input,
});
}
};
// listen to boardcast msg
useEffect(() => {
socket.on("broadcast_msg", (data) => {
setMsg((list) => [...list, data]);
});
}, [socket]);
return (
<div className="chat">
<div className="chat-header"></div>
<div className="chat-body">
{msg.map((data) => {
return (
<>
<h1>{data.author}</h1>
<h1>{data.room}</h1>
<h1>{data.message}</h1>
</>
);
})}
</div>
<div className="chat-footer">
<input
type="text"
placeholder="Enter the message..."
onChange={(e) => {
setInput(e.target.value);
}}
/>
<button onClick={send_msg}>Send</button>
</div>
</div>
);
}
export default Chat;
uj5u.com熱心網友回復：
useEffect(() => {
const eventListener = (data) => {
setMsg((list) => [...list, data]);
};
socket.on("broadcast_msg", eventListener);
return () => socket.off("broadcast_msg", listener);
}, [socket]);
與聽眾一起做。再次觸發時運行 useEffect 并清理偵聽器，這應該可以解決問題。或者在安裝時只運行一次。
useEffect(() => {
socket.on("broadcast_msg", (data) => {
setMsg((list) => [...list, data]);
});
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/466519.html