0

Estou desenvolvendo um chat privado simples em ReactJS e Socket.io. Entretando surgiu um problema para resolver a seguinte situação.

Primeiramente realizo o cadastro dos usuários no banco de dados através do componente de Registro. Em seguida no componente UserList são consultados via axios todos os usuários cadastrados e armazenados no estado de users , gerando assim um array de objetos contendo todos os usuários do BD.

Trecho do código - UserList.jsx

const [users, setUsers] = useState([]);

// Get All Users
    useEffect(() => {
        setLoading(true);
        axios.get(`${urlBase}/consult`)
            .then(resp => {
                setUsers(resp.data);
                setLoading(false);
            })
            .catch(err => {
                //console.log(err);
            })
    }, []);

Ao mesmo tempo utilizando o Socket.io, eu envio um emit para o server informando o nickname do usuário que acabou de realizar o login. Destarte, o server recebe esses dados e retorna um emit passando o nickname enviado juntamente ao socket.id, para todos os usuários conectados. Esses dados são recebidos no lado client da aplicacão e adicionados a usersOnline, array que armazena os usuários que estão online.

Trecho do código - Chat.jsx

const [userOnline, setUserOnline] = useState([]);

    useEffect(() => {
        socket.on('getOnline', data => {
            setUserOnline(data);
        });
    }, [userOnline]);

retorno do primeiro array - users

  0: {id_user: 68, first_name: "Fernanda", last_name: "Silva", email: "[email protected]", nickname: "fernanda", …}
  1: {id_user: 69, first_name: "Carlos", last_name: "Silva", email: "[email protected]", nickname: "carlos", …}
  2: {id_user: 70, first_name: "Pedro", last_name: "Perreira", email: "[email protected]", nickname: "pedrão", …}

retorno do segundo array

nickname: "carlos"
socketId: "BwaRW_6zF5rCwRGcAAAC"

Preciso passar para o primario array o socketId do segundo no respectivo nickname.

ex: nesse caso

1: {id_user: 69, first_name: "Carlos", last_name: "Silva", email: "[email protected]", nickname: "carlos", **socketId: "BwaRW_6zF5rCwRGcAAAC"**}

Se alguém puder ajudar, desde já agradeço!!

1 Resposta 1

1

No JavaScript poderia fazer da seguinte forma:

users.find(user => user.nickname === response.nickname).socketId = response.socketId;

No React, você pode usar o spread operator para criar um novo vetor e não referenciar o mesmo com o seu estado, pode ser desta forma:

const newUsers = [...users];
const index = newUsers.findIndex(user => user.nickname === response.nickname);

if (index !== -1) {
   newUsers[index].socketId = response.socketId;    
   setUsers(newUsers);
}

Acontece que, o método findIndex retorna o primeiro elemento do vetor que retornar true em seu callback. Como o nickname é único, é uma boa opção.

3
  • (Cannot set property 'socketId' of undefined) - Parece que ele não adiciona o valor pois o campo não existe no array... 4/04/2020 às 20:08
  • Nesse caso você pode adicionar uma estrutura condicional. Editei o post :) 4/04/2020 às 20:24
  • 1
    Valeu, tu é o cara ;) 4/04/2020 às 20:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .