React: Los elementos de lista con una "clave" única se vuelven a representar cuando cambia el orden de los elementos.
¿Quieres solicitar una función o informar de un error ?
Insecto
¿Cuál es el comportamiento actual?
Al representar una lista de elementos con key establecido como propiedad única en cada elemento de elemento, si el orden de los elementos cambia desde el procesamiento anterior, los elementos de elemento cuyos índices cambiaron se vuelven a representar (se crea una nueva instancia) en lugar de volver a -utilizando una instancia existente (mapeada mediante clave).
Por ejemplo, https://codesandbox.io/s/r5p48kzop
Representar una lista boxes con cada cuadro con id , top , left & color props. Cada 750ms actualizamos los valores ( top , left ) para todos los elementos dentro de la matriz boxes .
Mientras se actualiza, si el orden de los elementos no cambia, cada cuadro se anima a su nueva posición. Sin embargo, si quitamos el comentario de la línea 31 que mezcla los cuadros, solo los elementos que conservan su posición del renderizado anterior se animan a nuevas posiciones.
Puede observar este comportamiento en la zona de pruebas. Con _shuffle _shuffle activados, a veces las cajas saltan a sus nuevas posiciones mientras que con
Si el comportamiento actual es un error, proporcione los pasos para reproducir y, si es posible, una demostración mínima del problema. Pegue el enlace a su JSFiddle (https://jsfiddle.net/Luktwrdm/) o CodeSandbox (https://codesandbox.io/s/new) ejemplo a continuación:
https://codesandbox.io/s/r5p48kzop
¿Cuál es el comportamiento esperado?
Independientemente del orden de boxes todos los elementos de la caja deben animarse a sus nuevas posiciones, ya que tienen una propiedad única key establecida en ellos.
¿Qué versiones de React y qué navegador / sistema operativo se ven afectados por este problema?
Reacciona 16.3.2 & 16.4.1 , Chrome, MacOS.
dhruvparmar372
Todos 3 comentarios
¡Hola @ dhruvparmar372!
Esto parece ser una limitación del DOM. Para demostrar esto, creé este JSFiddle que cambia el orden de dos nodos DOM y luego aplica una clase para desencadenar una transición.
Resulta que puede solucionar este problema activando un reflujo entre cambiar el orden y actualizar las propiedades de la animación.
Agregué un poco de código a su CodeSandbox para que sea visible cuando React recrea un componente cambiando <Box /> para que sea un componente de clase y creando una identificación única en el constructor. Como puede ver, la identificación se mantendrá constante: https://codesandbox.io/s/jn42wvl343
Además de eso, apliqué la solución alternativa de reflujo a su ejemplo dividiendo la actualización en dos setState s. El primero cambiará el orden, luego activamos un reflujo y luego cambiamos la posición. Esto parece funcionar bien en Chrome, Firefox, Safari y Edge (CodeSandbox no es compatible con IE11, por lo que no pude probar en ese navegador).
philipp-spiess
en 15 jul. 2018
hey @ philipp-spiess gracias por aclarar el problema y los ejemplos para la solución.
dhruvparmar372
en 15 jul. 2018
Hola, @ philipp-spiess
Tengo el mismo problema con la lista de clasificación 😔
Desafortunadamente, su ejemplo de Codesandbox anterior ya no funciona (
Aquí hay un ejemplo:
https://jsfiddle.net/9odLvbrx/
Ordena los elementos al hacer clic con una simple transición de CSS.
El problema es que la transición aparece solo en el elemento seleccionado y omite el resto.
Sé cómo solucionar el problema (comentado en el código) pero funciona bien solo en listas cuya cantidad de artículos nunca cambia. Entonces, si quiero agregar o eliminar un elemento, las cosas se vuelven increíblemente complejas. ¿Cómo puedo usar su solución de sobrecarga de reflujo para que esto suceda en mi ejemplo?
¡Gracias por adelantado! 😊
akosarch
en 1 abr. 2019
Temas relacionados
jvorcak
·
3Comentarios
tleunen
·
3Comentarios
h1orz
·
3Comentarios
krave1986
·
3Comentarios
huxiaoqi567
·
3Comentarios
Comentario más útil
¡Hola @ dhruvparmar372!
Esto parece ser una limitación del DOM. Para demostrar esto, creé este JSFiddle que cambia el orden de dos nodos DOM y luego aplica una clase para desencadenar una transición.
Resulta que puede solucionar este problema activando un reflujo entre cambiar el orden y actualizar las propiedades de la animación.
Agregué un poco de código a su CodeSandbox para que sea visible cuando React recrea un componente cambiando
<Box />para que sea un componente de clase y creando una identificación única en el constructor. Como puede ver, la identificación se mantendrá constante: https://codesandbox.io/s/jn42wvl343Además de eso, apliqué la solución alternativa de reflujo a su ejemplo dividiendo la actualización en dos
setStates. El primero cambiará el orden, luego activamos un reflujo y luego cambiamos la posición. Esto parece funcionar bien en Chrome, Firefox, Safari y Edge (CodeSandbox no es compatible con IE11, por lo que no pude probar en ese navegador).