React
Le chiavi reagiscono
Ricerca…
introduzione
Le chiavi in risposta vengono utilizzate per identificare internamente un elenco di elementi DOM della stessa gerarchia.
Quindi, se stai iterando su un array per mostrare un elenco di elementi li, ognuno degli elementi li ha bisogno di un identificativo univoco specificato dalla proprietà chiave. Questo di solito può essere l'id del tuo oggetto del database o l'indice dell'array.
Osservazioni
L'utilizzo dell'indice dell'array come chiave non è generalmente raccomandato quando l'array cambierà nel tempo. Da React Docs:
Come ultima risorsa, puoi passare l'indice dell'oggetto nell'array come chiave. Questo può funzionare bene se gli articoli non vengono mai riordinati, ma i riordini saranno lenti.
Un buon esempio a riguardo: https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
Utilizzando l'id di un elemento
Qui stiamo visualizzando un elenco di elementi che vengono passati agli oggetti di scena del nostro componente.
Ogni articolo di TOD ha una proprietà text e id. Immagina che la proprietà id provenga da un datastore back-end ed è un valore numerico univoco:
todos = [
{
id: 1,
text: 'value 1'
},
{
id: 2,
text: 'value 2'
},
{
id: 3,
text: 'value 3'
},
{
id: 4,
text: 'value 4'
},
];
todo-${todo.id} l'attributo chiave di ogni elemento dell'elenco iterato su todo-${todo.id} modo che la reazione possa identificarlo internamente:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo) =>
<li key={ `todo-${todo.id}` }>
{ todo.text }
</li>
}
</ul>
);
}
Utilizzando l'indice dell'array
Se non disponi di ID di database univoci, puoi anche utilizzare l'indice numerico del tuo array in questo modo:
render() {
const { todos } = this.props;
return (
<ul>
{ todos.map((todo, index) =>
<li key={ `todo-${index}` }>
{ todo.text }
</li>
}
</ul>
);
}
