Vid arbete med moderna webbapplikationer är det vanligt att rendera samlingar av data som tas emot från backend. För att uppnå detta använder vi metoden map(). Inom map()-metoden använder vi en callback-funktion och returnerar JSX för att rendera önskat resultat.

Låt oss ta ett exempel för att illustrera hur det fungerar. Vi har en App-komponent som skickar propen toys, en array av objekt. ToyCard-komponenten använder metoden map() för att rendera varje leksak i arrayen.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

På raderna 13–15 ser vi användningen av metoden map(). Den gör det möjligt att iterera genom varje objekt i arrayen, extrahera dess värde och generera specifik markup baserat på varje objekts data.

Fullständig appkod:

Om vi däremot tittar i konsolen kan vi se att vi får varningen: Each child in a list should have a unique "key" prop..

Nyckel

Key är en avgörande strängprop som måste tilldelas när element skapas inom en samling.

React använder nycklar för att säkerställa en stabil identitet för element inom en samling. Dessa nycklar gör det möjligt för React att identifiera vilka element som måste renderas om och återskapas vid förändringar, istället för att återskapa hela samlingen. Användning av nycklar förhindrar onödig återskapning av element, vilket leder till förbättrad prestanda.

Observera

Nyckeln måste vara unik bland närliggande element. Den ska förbli konstant och inte ändras över tid.

Det är vanligt att använda identifierare, såsom id-värden från backend-data, som key-props. Denna praxis gör det möjligt för React att effektivt identifiera och hantera individuella element inom en samling.

Låt oss åtgärda vår tidigare app genom att använda key-props för objekten:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

Rad 14: key-propen anges på det element som kommer att renderas flera gånger inom en array av data.

Komplett appkod: