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

user_8757992 0
Viewed 543
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?

socket.io react-hooks reactjs
1 Answers

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]
   });
 });
user_143498080
Related