Array.push 多次推送内容

Question

    useEffect(() => {
    socket.on("private message", ({ content, from }) => {
      console.log(content, from, "content & form");
      for (let i = 0; i < usersList.length; i++) {
        var user = usersList[i];
        if (user.userID === from) {
          console.log("user from");
          user.messages.push({
            content,
            fromSelf: false,
          });
          if (user !== selectedUser) {
            console.log("user to");
            user.hasNewMessages = true;
          }
          break;
        }
      }
    });
  }, [usersList, selectedUser]);

I am using socket to make private chat, but the thing is that user.messages.push, pushes the content multiple times because it is inside the for loop, here usersList is a list of all connected users, so if 3 users are connected, it will loop 3 times and then the messages will be pushed 3 times, How do I fix this so that it only pushes one time and not with relative to the number of users connected?

selectedUser is the user that the loggedIn user wishes to initiate a conversation with

NOTE : I need a solution except for maintaining a state and then changing it with first iteration and conditionally running the logic, Pls tell me other that this.

Answer 1

You are attaching new listeners each time the useEffect hook runs after usersList or selectedUser update. Each time the effect callback runs a new listener is added, and each one runs the same "private message" event callback. This is where the message content duplication is occurring.

I suspect you want only one listener. Use an empty dependency array so the effect runs only once on component mount.

const messageHandler = ({ content, from }) => {
  console.log(content, from, "content & form");
  for (let i = 0; i < usersList.length; i++) {
    var user = usersList[i];
    if (user.userID === from) {
      console.log("user from");
      user.messages.push({
        content,
        fromSelf: false,
      });
      if (user !== selectedUser) {
        console.log("user to");
        user.hasNewMessages = true;
      }
      break;
    }
  }
}

useEffect(() => {
  socket.on("private message", messageHandler);
}, []);

You may see some lint warning about unspecified dependency on messageHandler , if necessary you can disable the linter for this as follows:

useEffect(() => {
  socket.on("private message", messageHandler);
  // Run effect only on component mount
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

Answer 2

I think you need to keep the user.userID in your client and remove the for loop in the socket.on "private message" Event.

Something like this:

  // Global (Example values)
  const currentUser = 1;
  const usersList = [2, 3, 4, 5];

  useEffect(() => {
    socket.on("private message", ({ content, from }) => {
      console.log(content, from, "content & form");
        if (currentUser === from) { // The currentUser send a message to another user
          console.log("user from");
          user.hasNewMessages = true;
        } else if (user !== from) { // The currentUser receive a message from another user
            console.log("user to");
            user.messages.push({
                content,
                fromSelf: false,
            });
        }
    });
  }, [usersList, currentUser]);

Answer 3

This is what needed to be doing:

if (shipments.length > 0) {
    shipments.map((item, key: number) => {
        if (item.lookup_scan === newobj.lookup_scan) {
           shipments[key] = newobj;
        }
    });
    shipments.push(newobj);
} else {
    shipments.push(newobj);
}

This is what I was doing:

if (shipments.length > 0) {
    shipments.map((item, key: number) => {
        if (item.lookup_scan === newobj.lookup_scan) {
           shipments[key] = newobj;
        } else {
            shipments.push(newobj);
        }
    });
} else {
    shipments.push(newobj);
}

Answer 4

 const messageHandler = ({ content, from }: any) => {
    console.log(content, from, "content & form");
    var user;
    for (let i = 0; i < usersList.length; i++) {
      user = usersList[i];
    }
    if (user && user.userID === from) {
      console.log("user from");
      user.messages.push({
        content,
        fromSelf: false,
      });
      if (user !== selectedUser) {
        console.log("user to");
        user.hasNewMessages = true;
      }
    }
  };

  useEffect(() => {
    socket.on("private message", messageHandler);
  }, [usersList]);

This solved the bug, I had to move the Array.push out of the for loop.

Thanks everyone.