Node.js socket.io客户端在react native中接收对同一事件的多个调用

当用户登录到应用程序时。他通过连接到服务器中自己的用户ID

socket.join(uid)

而nodejs端点看起来像

router.post("/secured/postmessage", (req,res)=>{
  const { message, receiverId } = req.body;

 io.to(receiverId).emit("newMessage", {
      msgBody: message,
      sender: req.currentUser,
    });
})

export default function Chat({ navigation }) {

//receiveing the socket as props from previous screen
  const { contact, socket } = navigation.state.params;
  // console.log("in conversation contact is ", contact);


  const [data, setData] = useState([
    {
      id: 8,
      date: "9:50 am",
      type: "in",
      message: "Lorem ipsum dolor sit a met",
    },
  ]);

//this gets fired multiple times <--------
socket.on("newMessage", ({ msgBody, sender }) => {
    setData((oldMessages) => [...oldMessages, msgBody]);
  });

//handleSubmit gets fired when user types message and press SEND
const handleSubmit(){
//sending the post request to server with message
 axios.post(baseUrl + "/secured/postmessage", {
    message: message,
    receiverId: contact._id,
    })
}
return(
  ...
  )

router.post("/secured/postmessage", (req,res)=>{
 io.to(receiverId).emit("newMessage", {
      msgBody: messageResult,
      sender: req.currentUser,
    });
})

现在是RN部分：

聊天屏幕功能组件看起来像

router.post("/secured/postmessage", (req,res)=>{
  const { message, receiverId } = req.body;

 io.to(receiverId).emit("newMessage", {
      msgBody: message,
      sender: req.currentUser,
    });
})

export default function Chat({ navigation }) {

//receiveing the socket as props from previous screen
  const { contact, socket } = navigation.state.params;
  // console.log("in conversation contact is ", contact);


  const [data, setData] = useState([
    {
      id: 8,
      date: "9:50 am",
      type: "in",
      message: "Lorem ipsum dolor sit a met",
    },
  ]);

//this gets fired multiple times <--------
socket.on("newMessage", ({ msgBody, sender }) => {
    setData((oldMessages) => [...oldMessages, msgBody]);
  });

//handleSubmit gets fired when user types message and press SEND
const handleSubmit(){
//sending the post request to server with message
 axios.post(baseUrl + "/secured/postmessage", {
    message: message,
    receiverId: contact._id,
    })
}
return(
  ...
  )

router.post("/secured/postmessage", (req,res)=>{
 io.to(receiverId).emit("newMessage", {
      msgBody: messageResult,
      sender: req.currentUser,
    });
})

---

socket.聊天屏幕中的“newMessage”被多次触发，我不知道为什么

我认为只有在安装聊天组件时，才能尝试添加socket事件处理程序。 在功能组件中，可以使用React.useffect

请参阅下文

React.useEffect(() => {
    socket.on("newMessage", ({ msgBody, sender }) => {
        setData((oldMessages) => [...oldMessages, msgBody]);
    });
},[]);

---

我认为只有在安装聊天组件时，才可以尝试添加套接字事件处理程序。 在功能组件中，可以使用React.useffect

请参阅下文

React.useEffect(() => {
    socket.on("newMessage", ({ msgBody, sender }) => {
        setData((oldMessages) => [...oldMessages, msgBody]);
    });
},[]);

---

您是否多次调用聊天功能？如果是，您正在注册一个新的socket.onnewMessage。。。处理程序，它们会累积。您是否多次调用聊天功能？如果是，您正在注册一个新的socket.onnewMessage。。。每一次，他们都在积累。工作起来很有魅力，但你能解释为什么吗？根据我的理解，当组件成功安装时，将调用useEffect挂钩。但在这里，我们一直在监听套接字事件。那么在每次调用套接字事件时，组件是否重新装载或更新？据我所知，socket.on'newMessage'。。语句将在您的组件重新提交时执行。这意味着附加“newMessage”事件处理程序可能会发生多次。所以我认为，只有当组件通过传递[]作为useffect.com的第二个参数来装载时，才附加事件处理程序才更好。这个方法非常有效，但您能解释一下原因吗？根据我的理解，当组件成功安装时，将调用useEffect挂钩。但在这里，我们一直在监听套接字事件。那么在每次调用套接字事件时，组件是否重新装载或更新？据我所知，socket.on'newMessage'。。语句将在您的组件重新提交时执行。这意味着附加“newMessage”事件处理程序可能会发生多次。所以我认为只有在组件挂载时，通过将[]作为useffect的第二个参数来附加事件处理程序更好。