How to get the current state inside socket.io on callback function

Question

const useChat = () => {
const [messages, setMessages] = useState([]); 
const socketRef = useRef();
const { chatId } = useSelector(state => state.chatin)
const { chatList } = useSelector(state => state.chatin)
const dispatch = useDispatch()

useEffect(() => {
   socketRef.current = io(socketClient);

 socketClient.on('chat', (data) => {
    const targetMessage = (messages) =>  messages.findIndex(item => item.message_number === data.message_number);
   console.log('targetMessage', targetMessage)
   if (targetMessage !== -1) {
     messages[targetMessage].is_hide = true;
   }
   setMessages((messages) => [...messages, data]);
 });


  return () => {
    socketRef.current.disconnect();
  };
}, []);

whenever I got new socket data, I wanna change 'messages' data, but can't access it, because it always shows initial data value.After that I have a question about how can I set it?

Or are you trying to append the latest data into message state ? Not really sure what you meant by 'change messages' — user2232355
– user2232355, Commented Dec 27, 2020 at 15:43
did you try to log the data to see if you could get new data? — Taghi Khavari
– Taghi Khavari, Commented Dec 27, 2020 at 18:00

lissettdm · Accepted Answer · 2020-12-28 12:31:24Z

1

You can move the if condition inside setMessages function, this way you will get access to the current state:

socketClient.on('chat', (data) => {
    setMessages((messages) => {
      const targetMessage = messages.findIndex(item => item.message_number === data.message_number);       
      if (targetMessage !== -1) {
        messages[targetMessage].is_hide = true;
      }
      return [...messages, data]
   });
 });

edited Dec 28, 2020 at 12:31

answered Dec 27, 2020 at 21:40

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aiden Kim Over a year ago

it needs to be changed to const targetMessage = messages.findIndex(item => item.message_number === data.message_number); and works! thank you!

Collectives™ on Stack Overflow

How to get the current state inside socket.io on callback function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related