Tengo un punto final de api como este y necesito realizar una solicitud de venta a este punto final.
api/user-group/{id}/invite/{userId}El problema que tengo es que mi formulario contiene una lista múltiple, una lista de selección de reacción que permite a los usuarios seleccionar tantos grupos como quieran y, por lo tanto, cada vez que un usuario selecciona un grupo, almaceno la identificación de los grupos en el estado local pero mi api el punto final solo acepta una identificación de grupo. Creo que la solución es pasar por encima de los ID de grupo y hacer solicitudes separadas. ¿Alguien puede guiarme sobre cómo lograr esta solución o hay una solución mejor?
Mi código:
const AddUserToGroupPage = () => { const [currentUserId, setCurrentUserId] = useState(''); const [GroupIds, setGroupIds] = useState([]); const { inviteUserToGroup } = useUserGroupApi(); const InviteExistingUser = async () => { const body = {}; const res = await inviteUserToGroup({ id: groupIds, body, userId: currentUserId, }); return res; }; const onGroupsSelected = (selected) => { if (selected) { setGroupIds(selected.map((select) => select.value)); } }; return ( <> <Select name="userGroups" label="User Groups" placeholder="Select as many groups as you want" id="userGroups" defaultOptions options={groups} isMulti onSelectChange={onGroupsSelected} /> </> ) }Creo que puedes lograr lo que quieres así:
const InviteExistingUser = async () => { const body = {}; return await Promise.all( groupIds.map((groupID) => { return inviteUserToGroup({ body, id: groupID, userId: currentUserId, }); }), ); }; En este código, la llamada a groupIds.map() devolverá una lista de Promesas, cada una de las cuales se resuelve con el valor de retorno de una llamada a inviteUserToGroup (un resultado para cada ID de grupo).
Luego puede pasar esa lista a Promise.all , que devuelve una Promesa que se resuelve en una lista de resultados. Básicamente, pasa de Promise<result>[] (una lista de promesas) a Promise<result[]> (una promesa para una lista).
Luego puede await esa Promesa, momento en el que termina con una lista de resultados para todas las llamadas a inviteUserToGroup .
Tienes 3 opciones:
GroupIds.forEach(g => { const body = {}; const res = await inviteUserToGroup({ id: g.id, body, userId: currentUserId, }); // save response setGroupsInfo(prev => [...prev, res] }) const requests = GroupIds.map(g => { return inviteUserToGroup({ id: g.id, body, userId: currentUserId, }); }) Promise.all(requests).then(resArray => { setGroupsInfo(resArray) }) // take 5 each time for(let i = 0; i < GroupIds.length; i += 5){ const subGroupsIds = GroupIds.slice(i, i + 5); // fire 5 requests const requests = subGroupsIds.map(g => { return inviteUserToGroup({ id: g.id, body, userId: currentUserId, }); }) // wait for the 5 requests const resArr = await Promise.all(requests); setGroupsInfo(prev => [...prev, ...resArr]); }la segunda opción es la peor, ya que puedes tener tantos grupos y no puedes solicitarlos todos al mismo tiempo.
la tercera opción es la óptima pero su implementación no es sencilla.
la primera opción es fácil y pero en gran número de grupos será lento.