Array doesn't save information ReactJS-CodePudding

import './App.css';
import io from 'socket.io-client'
import { useEffect, useRef, useState } from 'react'
import React from 'react';
import ReactDOM from "react-dom/client";


const socket = io.connect("http://localhost:3001");

function App() {
  const [message, setMessage] = useState("");
  const [state, setState] = useState([]);
  const [chat, setChat] = useState([]);
  const socketRef = useRef();
  const sendMessage = () => {
    socket.emit("send_message", { message });
  };

  const renderChat = () => {
    return (
        chat.map(msg => {
            console.log(msg.data)
            return (
                <h3>{msg.data["message"]}</h3>
            )
        })
    )
}

useEffect(() => {
    socketRef.current = io.connect("http://localhost:3001")
    socketRef.current.on("receive_message", ({ message }) => {
      setChat([ ...chat, { message } ])
    })
    return () => socketRef.current.disconnect()
  },
  [ chat ]
)
  return (
    <div className="App">
      <input placeholder="Message..." onChange={(event) => {
        setMessage(event.target.value);}}
        />
      <button onClick={sendMessage}>Send Message</button>
      <h1>Message:</h1>
      {renderChat()}
    </div>
  );
}

export default App;

For some reason the useEffect that needs to store information doesn't work. I have tried a few solutions to store new values in an array useState but I always get this error:

When I do it like this:

  useEffect(() => {
    socket.on("receive_message", message => {
      setChat([...chat, {message}]);
    });
  }, [socket])

it works but it doesn't save the information (it always has only 1 value which is the latest input text).

CodePudding user response：

You can do it like in the second approach you mentioned, using the previous State:

  useEffect(() => {
    socket.on("receive_message", message => {
      setChat(prevState => [...prevState, {message}]);
    });
  }, [socket])

CodePudding user response：

You try

useEffect(() => {
   socket.on("receive_message", ({ message }) => {
     if(!!message){
       setChat(prev => [ ...prev, { message } ])
     }
   })
   return () => socket.disconnect()
},[ socket ])