Ongelmia uusien id:iden kanssa Reactissa

Oletetaan, että tietokannasta on tullut seuraava olioiden taulukko:

jsxconst prods = [
  {id: 1, name: 'product1', cost: 100},
  {id: 2, name: 'product2', cost: 200},
  {id: 3, name: 'product3', cost: 300},
];

Kuten näet, id:t on numeroitu peräkkäin. Meidän on kuitenkin otettava huomioon, että numerot voivat sisältää aukkoja, esimerkiksi 3:n jälkeen voi tulla suoraan 5:s tai 6:s. Tästä syystä asiakaspuolen skriptimme ei voi tietää, mikä on seuraava id (meidän tapauksessamme se ei välttämättä ole 4).

Uudet id:t luo palvelimen tietokanta. Tämä voi aiheuttaa ongelmia asiakaspuolen työskentelyssä. Ongelman ydin on seuraava: kuvittele, että lomakkeen avulla lisäsimme uuden elementin taulukkoomme. Emme kuitenkaan voi vain lisätä lomakkeen tietoja - emmehän tiedä mikä id uudella elementillä on!

Meidän on lähetettävä pyyntö palvelimelle, jotta se antaisi meille seuraavan id:n, ja vasta sitten lisätä elementti olioiden taulukkoomme. Tämä aiheuttaa viiveen datan näyttämisessä näytöllä: kunnes data saapuu palvelimelle, kunnes palvelin lähettää sen takaisin meille, kuluu jokin aika.