Unikaalsed võtmed massiivi elementides Reactis

Eelmises näites moodustasime oma lõigud tsüklis, nii:

jsxconst res = arr.map(function(item) {
  return <p>{item}</p>;
});

See töötab, kuid kui vaadata konsooli - näeme viga: Warning: Each child in an array or iterator should have a unique "key" prop. Sel juhul nõuab React, et iga tsüklist saadud elemendi annaksime unikaalse numbri, et Reactil oleks lihtsam nende elementidega edaspidi töötada.

See number lisatakse atribuudi key abil. Sel juhul saame numbriks võtta elemendi numbri massiivis. Meie juhul see number salvestub muutujasse index ja seega parandatud rida näeb välja selline:

jsxconst res = arr.map(function(item, index) {
  return <p key={index}>{item}</p>;
});

Käivitame - viga konsoolist kaob:

jsxfunction App() {
  const arr = [1, 2, 3, 4, 5];
  
  const res = arr.map(function(item, index) {
    return <p key={index}>{item}</p>;
  });
  
  return <div>
    {res}
  </div>;
}

Veelkord: see atribuut key on teenindus- väärtusega Reactile, sügavamalt saate aru sellest punktist järgmistes õppetükides. Praegu lihtsalt teadke: kui näete sellist viga - lisage atribuut key unikaalse väärtusega iga elemendi jaoks ja probleem kaob.