React.js: come generare una chiave quando si crea una creazione ottimistica?

Question

Lavorare con React.js è davvero divertente.

Ho creato una semplice app di commento basata sul tutorial ufficiale.

È possibile aggiungere, modificare ed eliminare commenti. Sono tirati via GET ogni 10 secondi.

A un certo punto, il tutorial menziona gli aggiornamenti ottimistici: l'aggiornamento dell'interfaccia utente prima che il server abbia risposto in caso di un'operazione di creazione, aggiornamento o eliminazione.

Poiché i commenti fanno parte di un elenco, React suggerisce di assegnare una chiave univoca a ciascun commento.

Pertanto, utilizzo l'ID del database di ciascun commento come chiave. Funziona bene per le operazioni di aggiornamento e cancellazione.

Tuttavia, nel caso di un'operazione di creazione, non conosco l'ID del database di un commento fino a quando non è stato effettivamente creato sul lato server, e quindi non so quale valore assegnare alla chiave.

In quel momento, il commento viene aggiunto all'elenco dei commenti ma non ha chiave/ID e pertanto non può essere modificato o eliminato, fino a quando l'elenco non viene aggiornato durante il successivo sondaggio API.

Posso aggirare questo?

Answer 1

È possibile aggiungere, modificare ed eliminare commenti. Sono tirati via GET ogni 10 secondi.

POST sempre a una risorsa che restituisce la risposta JSON contenente i dati di cui abbiamo bisogno, nel tuo caso ID. Il ritardo è fino a ~ 100ms che va bene.

Se si imposta un ID temporaneo che non è uguale a quello che un database fornirà, allora React verrà nuovamente sottoposto a rendering una volta ricevuti i nuovi dati, ma vedrete due elementi identici come chiave non è la stessa.

Answer 2

Sono necessarie chiavi univoche, coerenti e disponibili. Gli ID del database non possono fornire il terzo requisito, ma è possibile - utilizzando "ID client" locali. Ovviamente, sei responsabile di garantire la loro unicità e coerenza.

Answer 3

Se è necessario che la chiave resti invariata tra gli aggiornamenti, è possibile assegnare un ID temporaneo a una proprietà non utilizzata. Quindi, utilizzare una funzione per recuperare la chiave corretta per i modelli di articoli dell'elenco. Se si aggiorna la proprietà tempId quando si aggiorna l'elemento, è possibile mantenere la chiave uguale finché l'elenco rimane in memoria.

Anche se non sempre si cura che l'elemento ottimistico venga rimosso e riaggiunto, è possibile semplificare il CSS quando si utilizzano animazioni on-enter o on-leave nel proprio elenco. Questo aiuta anche quando si dispone di componenti degli elementi di lista stateful.

Esempio:

let tempIds = 1; // 1 and up are truthy 

// where ever you add the new item to your list 
const newList = [...list, {...newItem, tempId: tempIds++}]; 

// get the right id 
function getKey(instance) { 
    if (instance.tempId) { 
    return instance.tempId; 
    } else { 
    return instance.id; 
    } 
} 

// in your list render function 
<List> 
    {list.map(model => (
    <Item 
     key={getKey(model)} 
     //other props go here 
    /> 
))} 
</List