Alterar chave do item sem disparar animação usando reagem-transição-grupo

votos
0

Estou construindo uma interface de usuário onde há uma lista de itens. Quando o usuário adiciona um item, ele irá enviar uma solicitação da API para criar um novo item, mas que também irá adicionar o item à lista com um ID temporário. Uma vez que a API volta, ele vai substituir o ID do item com o ID real do backend. O problema é que, quando a chave de alteração do item na lista, reagem-transição-grupo vai tratá-lo como uma supressão / adição e desencadear uma animação.

Aqui está a minha pergunta: Como posso saber reagir de transição de grupo que o novo ID pertence ao item antigo, por isso não aciona uma atualização?

Publicado 10/10/2019 em 00:55
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

Eu não estou muito familiarizado com reagem-transição-grupo, mas eu fiz de transição com outras bibliotecas. Eu acho que você pode usar outros campos para não chave apenas o id. Assim, gostaria de adicionar um campo de chave para o meu objeto na matriz. A chave deve ser exclusivo. Você pode usar resolvê-lo múltipla forma, por exemplo com um contador ou UUID. Eu gosto uuid. Desta forma, você pode mudar o ID de temporal com a final, se a chave permanece a mesma, não haverá animação.

const [items, setItems] = useState([
  { key: uuid(), id:'temporal id', name: 'name' },
  ...
]);

Na transição usar a chave, em vez do id.

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >
Respondeu 11/10/2019 em 10:37
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more