Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

162
Visualizações
Encontrar cambios entre dos listas de objetos en javascript usando React state

Estoy tratando de descubrir cómo diferenciar las adiciones y/o eliminaciones entre dos listas (basadas en una lista inicial) en Javascript. Por ejemplo,

 var AllPossibleThings = [ {key: '1', value: 'thing 1'}, {key: '2', value: 'thing 2'}, {key: '3', value: 'thing 3'}, {key: '4', value: 'thing 4'}, {key: '5', value: 'thing 5'}, {key: '6', value: 'thing 6'}, {key: '7', value: 'thing 7'} ] var serverStateOfThings = [ {key: '2', value: 'thing 2'}, {key: '3', value: 'thing 3'} ] var newStateOfThings = [ {key: '1', value: 'thing 1'}, {key: '4', value: 'thing 4'} ]

En este momento, el caché del servidor de una entidad en particular hace referencia a la cosa 2 y la cosa 3. Después de algunas operaciones del lado del cliente, tengo un nuevo estado que necesito persistir en el servidor. Pero quiero separar el estado en operaciones de agregar y eliminar.

Usando el ejemplo anterior, quiero que el resultado sea:

 const newStateOfThingsWithExtra = [ {key: '1', value: 'thing 1', op: "add"}, {key: '4', value: 'thing 4', op: "add"}, {key: '1', value: 'thing 1', op: "delete"}, {key: '3', value: 'thing 3', op: "delete"},]

Entonces puedo ir:

 const toDelete = newStateOfThingsWithExtra.filter(i => i.op === 'delete'); const toAdd = newStateOfThingsWithExtra.filter(i => i.op === 'add');

Y haz dos llamadas al servidor, una para las eliminaciones y otra para las adiciones. Algo como:

 async function SaveThings() { return await axios.delete(myUrl, toDelete) .then(response => { axios.post(myUrl, toAdd) }) }

Para el contexto, estoy usando un componente de lista de tareas y pasando:

 <AssignmentList leftSide={AllPossibleThings} rightSide={serverStateOfThings} />

Hay un onChange que le devuelve el lado derecho actual cada vez que el usuario agrega o elimina de la lista. Entonces necesito manejar el ahorro.

Tengo problemas para entender la lógica más que la sintaxis. Puedo comparar fácilmente una lista con otra para ver si está allí o no. Pero si es así, ¿cómo puedo saber si algo estaba ahí y ahora no lo está, y si algo no está ahí ahora pero estaba... haciendo referencia a una tercera lista?

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda