Estoy tratando de practicar socket.io con React.js , así que estoy tratando de enviar mensajes entre dos clientes, sin embargo, tengo problemas para mostrar los mensajes. Quiero mostrar los últimos mensajes enviados. Ahora estaba pensando en hacerlo como una matriz porque un estado no funcionaba. Cuando la consola registra la matriz, aparece en la consola pero nunca se muestra
import { useEffect, useState } from "react"; import io from "socket.io-client"; import "./App.css"; let socket; const CONNECTION_PORT = "localhost:3001/"; function App() { const [loggedIn, setLoggedIn] = useState(false); const [room, setRoom] = useState(""); const [userName, setUserName] = useState(""); const [message, setMessage] = useState(""); var itemArray = []; useEffect(() => { //connect to the socket socket = io(CONNECTION_PORT); socket.on("receive-message", (data) => { itemArray.push(data); console.log("Pong"); console.log(itemArray); }); //receiving messages socket.on("authentication", (bool) => { if (bool === true) { setLoggedIn(true); } }); }, [CONNECTION_PORT]); //Sending a request to join the room const connectToRoom = () => { socket.emit("join-room", room, userName); }; const sendMessage = () => { socket.emit("send-message", message); }; return ( <div className="App"> {!loggedIn ? ( <div className="login"> <input type="text" placeholder="Name..." onChange={(e) => { setUserName(e.target.value); }} /> <input type="text" placeholder="Room..." onChange={(e) => { setRoom(e.target.value); }} /> <button onClick={connectToRoom}> Enter Chat</button> </div> ) : ( <div> <input type="text" placeholder="Send Message..." onChange={(e) => { setMessage(e.target.value); }} /> <button onClick={sendMessage}>Send Message</button> <div> {itemArray.map((data) => { console.log(data); })} </div> </div> )} </div> ); } export default App;La matriz se está actualizando, pero no hay nada que decirle a React que renderice la actualización. Cualquiera de estos cambios hará que el componente se vuelva a renderizar:
React DOM compara el elemento y sus elementos secundarios con el anterior, y solo aplica las actualizaciones de DOM necesarias para llevar el DOM al estado deseado.
Está actualizando una variable de matriz dentro del componente, pero esto no activará un procesamiento. Mueva la matriz al estado:
const [messages, setMessages] = useState([]); ... useEffect(() => { ... socket.on("receive-message", (data) => { // update the state which triggers a render setMessages(prevState => [...prevState, data]); }); }, [CONNECTION_PORT]);Debe devolver los datos para verlos. El mapa devuelve cada valor que atraviesa, por lo que debe asegurarse de decir que desea ver los datos como en una lista. Asegúrese de regresar así.
Función de mapa interior
{itemArray.map((data) => { return<li>{data.propertyName}</li> })}Aquí propiedad será cualquier cosa de una propiedad de objeto