Considere dos arreglos leftArray (los datos son locales) y rightArray (los datos están dentro del servidor).

Entonces, mi componente permite a los usuarios intercambiar elementos dentro de la lista entre sí, ya sea cargarlos en el servidor o eliminarlos del servidor usando los botones izquierdo y derecho.

El botón izquierdo es para eliminar los elementos del servidor y el botón derecho es para enviar elementos al servidor.

Consulte la imagen a continuación, así es como se ve el componente de transferencia de diseño Ant:

Entonces, mi problema es cuando el usuario manipula los datos, ya sea a la izquierda o a la derecha, quiero tener todas las claves que se agregaron o eliminaron recientemente del servidor. Pero los elementos de la matriz derecha que ya están en el servidor, no necesito las claves, porque ya están en el servidor.

Entonces, ¿cómo separaría las teclas asignadas (lista de la derecha) y las teclas no asignadas (lista de la izquierda)? La función onChange se ejecuta cada vez que el usuario hace clic hacia la izquierda o hacia la derecha. Inicialmente, declaro dos matrices vacías y empiezo a concatenar, ya sea addList o removeList. Ahora quiero saber exactamente qué claves se eliminan del servidor y qué claves se agregan del servidor. .

a continuación se muestra la función onChange:

 if (direction === 'right') { addedList= addedList.concat(movedKeysRight) addedList= [...new Set(addedList)] // to remove duplicate elements Incase a list item is added to the right, removed and then added again I don't want to repeat the keys that's why I have it here } if (direction === 'left') { removedList = removedList.concat(movedKeysLeft) removedList= [...new Set(removedList)] }