logo

Reagisci alla mappa

Una mappa è un tipo di raccolta dati in cui i dati vengono archiviati sotto forma di coppie. Contiene una chiave univoca. Il valore memorizzato nella mappa deve essere mappato sulla chiave. Non possiamo memorizzare una coppia duplicata nella map(). Ciò è dovuto all'unicità di ciascuna chiave memorizzata. Viene utilizzato principalmente per la ricerca rapida e la ricerca di dati.

In React, la ?mappa? metodo utilizzato per attraversare e visualizzare un elenco di oggetti simili di un componente. Una mappa non è la caratteristica di React. Si tratta invece della funzione JavaScript standard che può essere chiamata su qualsiasi array. Il metodo map() crea un nuovo array chiamando una funzione fornita su ogni elemento nell'array chiamante.

Esempio

Nell'esempio fornito, la funzione map() prende un array di numeri e ne raddoppia i valori. Assegniamo il nuovo array restituito da map() alla variabile doubleValue e lo registriamo.

tabella di verità completa del sommatore
 var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); 

In React, il metodo map() utilizzato per:

1. Attraversamento dell'elemento della lista.

Esempio

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) =&gt; <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = [&apos;A&apos;, &apos;B&apos;, &apos;C&apos;, &apos;D&apos;, &apos;D&apos;]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App; 

Produzione

algoritmo knn
Reagisci alla mappa

2. Percorrere l'elemento della lista con i tasti.

Esempio

 import React from &apos;react&apos;; import ReactDOM from &apos;react-dom&apos;; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) =&gt; ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById(&apos;app&apos;) ); export default App; 

Produzione

Reagisci alla mappa