React, używając .map z indeksem

Question

Mam prosty React składnik tak:

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; 

widzę, że docs dla Array.prototype.map() pokazuje, że drugi argument to wskaźnik, obok CurrentValue. Jak zmienić istniejący kod, aby odebrać drugi argument?

Answer 1

Trzeba do tego:

todos.map((key, index) => { ... }) bez nawiasów obiektu dla argumentów.

({todo, index}) => { ... } - ta składnia oznacza, że ​​chcesz uzyskać właściwości todo i index z pierwszego argumentu funkcji.

Można zobaczyć składnię here:

Podstawowa składnia

(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 } 

składni Zaawansowane

// 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

Bądź ostrożny, nie należy korzystać z indeksu jako klucz jeśli lista jest dynamiczna, to jest antipattern i może lea d w kłopoty.

Powinieneś używać tego indeksu jako klucza TYLKO, jeśli masz pewność, że po utworzeniu nie będziesz musiał usuwać ani dodawać elementów do todos (nadal będzie to dopuszczalne, jeśli dodasz elementy, ale tylko na końcu listy, i wciąż nigdy nie usuwać). W przeciwnym razie React może mieć problemy z pogodzeniem dzieci.

Najlepszą praktyką jest dodanie "id" do wszystkich todos (przyrostowych lub UUID) i użycie go jako klucza do wszystkich list reagowania, które tego potrzebują.