Si intento llamar a socket.on fuera del componente, funciona, pero cuando lo uso en useEffect() ¿no funciona?
import ChatBubble from "../components/Chatbubblebot"; import io from 'socket.io-client' let data = []; function Messagelist({ sendMessage }) { data.push(sendMessage); useEffect(() => { const socket = io.connect("http://localhost:5000") socket.on("admin",(payload) => { console.log("payload",payload); data.push({who:"him",message:payload}) }) }) let list = () => { console.log("sendMessage",sendMessage.length); if (data === undefined && sendMessage.length === 0) { } else { return data.map((e) => <ChatBubble who={e.who} message={e.message} />); } }; return <ul>{list()}</ul>; } export default Messagelist;```Intente definir el componente externo de la variable de socket.
var socket;Y luego en el componente useEffect:
socket = io.connect("http://localhost:5000")También,
los let data = []; no debe definirse así.
Debería ser una variable de estado del componente como se muestra a continuación:
const [data, setData] = useState([]);Y cuando recibe un nuevo mensaje de socket:
socket.on("admin",(payload) => { console.log("payload",payload); let _data= data; _data.push({who:"him",message:payload}); setData(_data); })