Cambiare chiave della voce senza far scattare animazione utilizzando reagire transizione-group

voti
0

Sto costruendo un'interfaccia utente in cui v'è un elenco di elementi. Quando l'utente aggiunge un elemento, invierà una richiesta API per creare un nuovo elemento, ma sarà anche possibile aggiungere l'articolo alla lista con un ID temporaneo. Una volta che l'API ritorna, sostituirà l'ID della voce con l'ID reale dal backend. Il problema è che quando cambio la chiave della voce dell'elenco, reagisce-transizione gruppo tratterà come una cancellazione / aggiunta e attivare un'animazione.

Ecco la mia domanda: Come faccio a sapere reagire transizione-gruppo che il nuovo ID appartiene al vecchio oggetto, in modo da non far scattare un aggiornamento?

È pubblicato 10/10/2019 alle 00:55
fonte dall'utente
In altre lingue...                            


1 risposte

voti
0

Io non sono molto familiare con reagiscono-transizione-gruppo, ma ho fatto di transizione con altre biblioteche. Penso che si possa utilizzare per altri campi, non solo l'id chiave. Quindi mi sento di aggiungere un campo chiave per il mio oggetto dell'array. La chiave deve essere univoco. È possibile utilizzare risolverlo modo multiplo per esempio con un contatore o uuid. Mi piace uuid. In questo modo è possibile modificare l'ID temporale a quello finale, se la chiave rimane la stessa non ci sarà l'animazione.

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

Nella transizione utilizzare il tasto, al posto della id.

<TransitionGroup className="todo-list">
  {items.map(({ key, name }) => (
    <CSSTransition
      key={key}
      timeout={500}
      classNames="item"
    >
Risposto il 11/10/2019 a 10:37
fonte dall'utente

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