2

Tengo un problema con un código, tengo 3 variables users, toDoList y tasksDone:

  • una almacena una lista de usuarios (cada uno con su propiedad id, name y tasks: [])
  • la segunda es una lista de tareas (es la misma para todos los usuarios, la razón por la que está en una variable independiente es porque se obtiene de una consulta diferente a la BD), cada una con su propiedad id, task(nombre de la tarea) y done (booleano que indica si se ha realizado la tarea, por defecto todas están en false)
  • la tercera es una lista con las tareas realizadas, cada una con la propiedad user_id, task_id y el booleano done en true

Lo primero que hago es asignar la lista de tareas completa a cada usuario mediante una función map:

users = users.map((user) => {
  user.tasks = [...toDoList];
  return user;
});

Ahora cada usuario de la lista aparece con este formato:

{
   id: 1,
   name: "Joe",
   tasks: [{
         id: 1,
         task: "task one",
         done: false
      }]
}

La variable tasksDone tiene el siguiente formato, para el ejemplo suponemos que el usuario con id 3 realizó las tareas 1 y 2:

const tasksDone = [
  {
    user_id: 3,
    task_id: 1,
    done: true
  },
  {
    user_id: 3,
    task_id: 2,
    done: true
  }
];

El problema viene a continuación: A la variable usuario la recorro con la función map, la idea es que por cada usuario dentro de users, mediante un ciclo for se comprueba si el id ese usuario aparece dentro de algún elemento recorrido de tasksDone, si es así, significa que el usuario ha realizado una tarea:

users = users.map((user, index) => {
  for (let i = 0; i < tasksDone.length; i++) {
    if (user.id === tasksDone[i].user_id) {
      console.log("Usuario coincide! ID: ", user.id);
      user.tasks[i].done = tasksDone[i].done; // Estableciendo 'done' a 'true' para la tarea y usuario actual
    }
  }
  return user;
});

Con lo anterior se supone que solo debería modificar el estado de la propiedad done a true si ha habido una coincidencia, sin embargo cuando verifico la lista de usuarios, todos aparecen con las tareas 1 y 2 marcadas en true aunque solo haya una coincidencia, pueden ver el código en acción aquí: https://codesandbox.io/s/snowy-dream-0993d?file=/src/index.js

Saludos!

EDIT:

A sugerencia de Mauricio, cambié la lógica de asignación después del primer if, ya que como mencionó, estaba asumiendo que la lista tasks de cada usuario tenía la misma longitud que la lista de tareas realizadas:

users = users.map((user, index) => {
  for (let i = 0; i < tasksDone.length; i++) {
    if (user.id === tasksDone[i].user_id) {
      console.log("Usuario coincide! ID: ", user.id);
      //user.tasks[i].done = tasksDone[i].done; 
      user.tasks.forEach(item=>{
         if(item.id === tasksDone[i].task_id) {
            item.id = true;
        } 
     }) 
    }
  }
  return user;
});
        

Pero aun así me modifica a todos los users.

3
  • En esta linea: user.tasks[i].done = tasksDone[i].done; estás asumiendo que la lista de tareas de un usuario coincide en tamaño con la lista de tareas realizadas, aún más, asumes que la posición de la tarea en la lista del usuario coincide con la posición de la tarea realizada en la lista de tareas. La lógica de eso parece errónea. Saludos Commented el 8 jul. 2021 a las 8:36
  • ¿Has visto que users tiene las tareas 1 y 2 en true antes de comenzar el bucle? toDoLista tiene las tareas 1 y 2 en true.
    – Juan
    Commented el 8 jul. 2021 a las 9:05
  • Hola Juan, toDoList tiene todas las tareas en false, lo puedes verificar en el link que dejé. Y sobre la respuesta de Mauricio, cambié un poco el código para que, una vez encontrada una coincidencia de user_id, recorrer todos los tasks del user para encontrar una coincidencia de task_id, pero aún así se modifican todos.
    – SoozaV
    Commented el 8 jul. 2021 a las 13:36

3 respuestas 3

1

Me di cuenta que incluso si intento modificar una tarea de un usuario directamente, el cambio se ejecuta en las listas de todos los usuarios:

users.map((user) => {
  user.tasks = [...toDoList];
  return user;
});

users[0].tasks[0].done = true; 
// Se supone que solo cambié la primer tarea del primer usuario
// pero se ve reflejado en todos

console.log(toDoList);
// Al hacer un console.log() del toDoList original me doy cuenta que el cambio
// también se ejecutó aquí!!!

No estoy muy seguro de cómo funciona la copia de arreglos de objetos que contienen arreglos de objetos... pero al parecer no se hacía una copia sino que el arreglo de objetos (toDoList) se mostraba en todos los usuarios.

La solución que encontré fue hacer uso de la función _cloneDeep() de la biblioteca Lodash, de esta manera cada lista de tareas asignada a cada usuario ahora sí era independiente de las demás:

import _ from "lodash";

users = users.map((user) => {
  user.tasks = _.cloneDeep(toDoList);
  return user;
});

users[0].tasks[0].done = true; 
// Ahora solo se modifica la primer tarea del primer usuario
// todos los demás usuarios permanecen intactos

Pueden comparar el código si gustan, este es el código SIN Lodash: https://codesandbox.io/s/snowy-dream-0993d?file=/src/index.js:0-851

Este es el código CON Lodash, el código ya hace lo que quería: https://codesandbox.io/s/compassionate-aryabhata-gwrpc?file=/src/index.js

Ya pude resolver mi problema, sin embargo no me queda claro qué es lo que sucede en el primer caso, si alguien pudiera explicarlo se lo agradecería mucho. Y ojalá la solución que encontré le sirva a alguien.

Saludos.

0

En esta asignación, si haces un console.log de users, verás que todos tienen true en la tarea, el resto está bien sólo que te devuelve true, porque ya vienen con true.

users = users.map((user) => {
  user.tasks = [...toDoList];
  return user;
});

2
  • Hola gracias por la respuesta. Si comentas el segundo map puedes ver que salen todos en false, no había notado eso, ¿por qué el segundo map está modificando a todos los usuarios incluso antes de ese console.log? Y más importante y lo que aún no entiendo, por qué se modifican todos los usuarios en lugar de solo el asignado en tasksDone? Agregué una edición al código, edité el mensaje original.
    – SoozaV
    Commented el 8 jul. 2021 a las 13:55
  • Luego me lo veo, lo que no vi es los users. Commented el 8 jul. 2021 a las 14:02
0

Esto podría ser útil, ejemplo: cambiar el bool "active" de un objeto entre una lista de objetos

    if (element.id === action.payload.id) {
       element.active = !element.active
   }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.