Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

209
Vistas
React-spring produce un elemento adicional en la eliminación de otro elemento

resorte para animar los elementos en una aplicación de lista de tareas pendientes, de modo que cuando agrego / elimino un elemento, se desvanecen con la animación, pero el problema extraño es cuando lleno las entradas de título y descripción (simplemente llene sin enviar) y luego presione uno de los elementos botón Eliminar, ese elemento se eliminará, pero los datos en esas entradas completas crearán otro elemento, aquí está el código

 const Search = (props) => { const [query, setQuery] = useState(""); const { todos, setTodos } = useContext(todosContext); const [currentPage, setCurrentPage] = useState(0); const getFilteredItems = (query, todos) => { if (!query) { return todos; } else { return todos.filter((todo) => todo.title.includes(query)); } }; const filteredItems = getFilteredItems(query, todos); const handlePageClick = ({ selected: selectedPage }) => { console.log("selectedPage", selectedPage); setCurrentPage(selectedPage); setQuery(""); }; const offset = currentPage * PER_PAGE; const currentPageData = filteredItems.slice(offset, offset + PER_PAGE); const deleteHandler = (id) => { axios.delete(`http://127.0.0.1:8000/todo/todos/${id}/`); setTodos( todos.filter((todo) => { return todo.id !== id; }) ); }; const transitions = useTransition(currentPageData, { from: { opacity: 0, transform: "translateY(-100px)" }, enter: { opacity: 1, transform: "translateY(0px)" }, leave: { opacity: 0, transform: "translateY(-100px)" }, keys: currentPageData.id, }); return ( <StyledDiv> {transitions((style, currentPageData) => currentPageData ? ( <animated.div style={style}> <Task key={currentPageData.id} title={currentPageData.title} description={currentPageData.description} backgroundColor="#ffffff" disabled={loading} onClick={() => deleteHandler(currentPageData.id)} type={"checkbox"} placeholder={"completed"} onChange={(e) => processChange(e, currentPageData.id)} checked={currentPageData.completed} id={currentPageData.id} htmlFor={currentPageData.id} marginTop="-5px" /> </animated.div> ) : ( "" ) )} </StyledDiv> ); }; export default Search;
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda