Tengo useContext que guarda todos los usuarios registrados en una matriz. Cada usuario tiene pocas propiedades, una de ellas es la matriz de mensajes, que almacena objetos con dos propiedades. Estoy usando este contexto a través de un gancho personalizado dentro del componente, así: const { loggedUsers, setLoggedUsers } = useUsers(); . El contexto se ve así:
export const UsersProvider = ({ children }: Props) => { const [loggedUsers, setLoggedUsers] = useState<any[]>([]); const socket = useSocket(); const addUser = (user: any) => { console.log(typeof loggedUsers); const users: any[] = loggedUsers; users.push(user); setLoggedUsers(users); }; const sortUsers = (users: any) => { users.forEach((user: any) => { user.self = user.userID === socket?.id; }); let sorted = users.sort((a: any, b: any) => { if (a.self) return -1; if (b.self) return 1; if (a.username < b.username) return -1; return a.username > b.username ? 1 : 0; }); setLoggedUsers(sorted); }; return ( <UsersContext.Provider value={{ loggedUsers, setLoggedUsers, addUser, sortUsers }} > {children} </UsersContext.Provider> ); };El usuario en la matriz se ve así:
{userID: 'Cm6vG0udcV6vl7MEAAAB', userName: 'test123', messages: [{message: 'dsada', fromSelf: true}], self: false, connected: true} Estoy actualizando el contexto/estado de esta manera, pero no obliga a volver a procesar, por lo que no se muestran mis mensajes entre usuarios. ¿Cual podría ser el problema? Si console.log logUsers, los mensajes están allí, pero no aparecen en DOM. Si necesitas más código, házmelo saber.
socket.on('private message', listenerMessage); const listenerMessage = async (msgInfo: any) => { console.log(msgInfo); console.log(msgInfo.from); const usersList = loggedUsers; for (let i = 0; i < usersList.length; i++) { const user = usersList[i]; if (user.userID === msgInfo.from) { user.messages.push({ message: msgInfo.message, fromSelf: false, }); if (user !== state.userID) { user.hasNewMessages = true; } console.log(loggedUsers, 'onprivatemessage'); setLoggedUsers(usersList); break; } } }; const onMessage = (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); if (state.userName) { socket?.emit('private-message', { message: mess, to: state.userID, }); const usersList = loggedUsers; for (let i = 0; i < usersList.length; i++) { const user = usersList[i]; if (user.userID === state.userID) { user.messages.push({ message: mess, fromSelf: true }); console.log(loggedUsers, 'onmessage'); } } setLoggedUsers(usersList); } setMess(''); };No debe mutar el estado de useState directamente. Clónalo antes:
const usersList = [...loggedUsers] const usersList = loggedUsers.slice()Aquí :
setLoggedUsers(usersList);Está pasando la misma matriz de estado a setLoggedUsers. La clonación del estado resolverá esto.
Lo que puedes hacer es esto:
setLoggedUsers(prev=>{ const prevUserList = prev.slice() //your for loop or anything return prevUserList; });También aquí :
const usersList = loggedUsers; for (let i = 0; i < usersList.length; i++) { const user = usersList[i]; if (user.userID === state.userID) { user.messages.push({ message: mess, fromSelf: true }); console.log(loggedUsers, 'onmessage'); } }Nunca actualizas la lista de usuarios, no sé si eso es lo que quieres.
estás usando const mientras actualizas los objetos. intente usar let y no const. Los objetos const no deben cambiarse.