He registrado un error para esto en el repositorio de React , pero parece haberse vuelto obsoleto.
Esencialmente, lo que estoy viendo es que si presentas una lista, por ejemplo:
return ( <div>{items.map(item => <ItemDisplay key={item} item={item} />)}</div> )Y luego toca un elemento para eliminarlo, una vez que ese elemento se ha eliminado del DOM, su hermano recibe un estado de desplazamiento.
Sospecho que lo que sucede es que el elemento real que desea eliminar no se elimina en absoluto, sino que simplemente se reutiliza para mostrar los otros elementos. Entonces, técnicamente , el elemento todavía está "sobrevolado". Pero en realidad debería ser eliminado.
Puede reproducir el ejemplo aquí abriéndolo con un dispositivo táctil (por ejemplo, su teléfono).
Intente usar react-app-polyfill : "Este paquete incluye polyfills para varios navegadores. Incluye requisitos mínimos y funciones de lenguaje de uso común utilizadas por los proyectos Create React App".
npm install react-app-polyfillY esta tiene que ser la primera línea en src/index.js
import 'react-app-polyfill/stable';He probado con firefox y chrome desde mi móvil y todo va bien..