React, utilizzando .map con indice

Question

Ho una semplice React componente in questo modo:

import React from 'react'; 

const ListPage = ({todos}) => (
    <div> 
    <h6>todos</h6> 
    <ul> 
    {todos.map(({todo, index}) => (
     <li key={index}>{todo}</li> 
    ))} 
    </ul> 
    </div> 
) 

ListPage.propTypes = { 
    todos: React.PropTypes.array, 
}; 

export default ListPage; 

posso vedere che la documentazione per Array.prototype.map() mostra che il secondo argomento è indice, accanto a CurrentValue. Come si altera il codice esistente per raccogliere il secondo argomento?

Answer 1

È necessario a questo:

todos.map((key, index) => { ... }) senza staffe oggetto per argomenti.

({todo, index}) => { ... } - questa sintassi significa che si desidera ottenere le proprietà todo e index dal primo argomento della funzione.

Si può vedere la sintassi here:

sintassi di base

(param1, param2, …, paramN) => { statements } 
(param1, param2, …, paramN) => expression 
     // equivalent to: => { return expression; } 

// Parentheses are optional when there's only one parameter: 
(singleParam) => { statements } 
singleParam => { statements } 

// A function with no parameters requires parentheses: 
() => { statements } 

Sintassi avanzata

// Parenthesize the body to return an object literal expression: 
params => ({foo: bar}) 

// Rest parameters and default parameters are supported 
(param1, param2, ...rest) => { statements } 
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements } 

// Destructuring within the parameter list is also supported 
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; 
f(); // 6 

Answer 2

Attenzione, non si dovrebbe usare l'indice come chiave se il la lista è dinamica, è antipattern e potrebbe lea d nei guai.

È consigliabile utilizzare l'indice come chiave SOLO se si è certi di non dover eliminare o aggiungere elementi a tutti i file dopo la creazione (potrebbe comunque essere accettabile se si aggiungono elementi ma solo alla fine dell'elenco, e comunque non cancellare mai). Altrimenti, Reagire potrebbe incappare in problemi di riconciliazione dei tuoi figli.

La procedura migliore è aggiungere un "id" a tutti i tuoi todos (incrementali o UUID) e usarlo come chiave per tutte le liste di reazione che ne hanno bisogno.