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

205
Visualizações
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 à 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