Estoy creando una aplicación que conecta voluntarios con recién llegados usando ReactJS. En la aplicación, he desarrollado un mecanismo de chat que ayudará a los recién llegados a conectarse con los voluntarios y viceversa. Implementé una función que muestra a los voluntarios destacados con su información y un botón que dice 'contacto'. Conecté el botón de contacto para que, cuando se presione, el usuario sea dirigido al chat y se cree un nuevo documento de lista de conversación en MongoDB mediante la solicitud POST.

El problema con el que me encuentro es que la solicitud POST continúa ejecutándose cada vez que hago clic en el botón 'contacto', lo que genera múltiples duplicados del nombre de usuario. Estoy luchando por encontrar una solución al problema. Me gustaría que solo un nombre de usuario se muestre en la página y no tenga un montón de duplicados. Cualquier ayuda es muy apreciada.

El método GET que toma el correo electrónico y el método POST que crea un nuevo documento

 **VolunterCard.jsx** React.useEffect(() => { const getImage = async () => { let response = await fetch(`/image/cass@gmail.com`); let data = await response.json(); console.log(`Data is:`, data); setVolunteer(data); }; getImage(); }, []); const createConversation = async () => { const newConversation = { members: { senderEmail: user.email, recieverEmail: volunteer.email }, }; const data = JSON.stringify(newConversation) await fetch("/conversation", { method: "POST", headers: { "Content-type": "application/json", }, body: data, }) };```

 **Conversation.jsx (Where the user gets rendered)** useEffect(() => { const chatMembers = conversation.members.find( (member) => member !== currentUser.email ); const getUsersFirstName = async () => { try { const response = await axios.get("/name?email=" + chatMembers); setUser(response.data); } catch (err) { console.log(err.message); } }; getUsersFirstName(); }, [currentUser, conversation, isLoading]); if (isLoading) { return <div>isLoading...</div>; } return ( <div style={{cursor: 'pointer'}}> {user.firstName} {user.lastName} - {user.email} </div> ); };``` **converstionModel.js** ```const mongoose = require("mongoose") const conversationSchema = new mongoose.Schema({ members: { type: Array, } }, { timestamps: true}); const conversationModel = mongoose.model("Members", conversationSchema); const createMembers = async (members) => { const newMembers = await conversationModel.create(members); return newMembers };```