web-dev-qa-db-fra.com

Réagissez en utilisant .map avec index

J'ai un composant React simple comme celui-ci:

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;

Je peux voir que la documentation pour Array.prototype.map() montre que le deuxième argument est index, à côté de currentValue. Comment peut-on modifier le code existant pour prendre le deuxième argument?

javascriptreactjs
16
ilrein

Vous devez faire ceci:

todos.map((key, index) => { ... }) sans crochets d'objet pour les arguments.

({todo, index}) => { ... } - cette syntaxe signifie que vous souhaitez obtenir les propriétés todo et index à partir du premier argument de function.

Vous pouvez voir la syntaxe ici :

Syntaxe de 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 }

Syntaxe avancée

// 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
37
Timur Bilalov

Attention, vous ne devez pas utiliser l'index comme clé si la liste est dynamique, elle est antipattern et peut entraîner des problèmes.

Vous ne devez utiliser l'index que comme clé si vous êtes certain de ne pas avoir à supprimer ou ajouter d'éléments à votre liste de tâches après la création (cela pourrait être acceptable si vous ajoutez des éléments mais uniquement à la fin de la liste, sans jamais les supprimer ). Sinon, React risque de rencontrer des problèmes pour réconcilier vos enfants.

La meilleure pratique consiste à ajouter un "id" à toutes vos tâches (incrémentielle ou UUID) et à l'utiliser comme clé pour toutes les listes de réactions qui en ont besoin.

5
Mijamo

Voici un exemple de base sur la réponse @ Timur Bilalov pour faciliter la compréhension

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map((material,index) => console.log(index +" = " + material + " = " + materials[index]));

Sortie

"0 = Hydrogen = Hydrogen"
"1 = Helium = Helium"
"2 = Lithium = Lithium"
"3 = Beryllium = Beryllium"

Référence
https://reactjs.org/docs/lists-and-keys.htmlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Référence/Fonctions/Arrow_functions

J'espère que ça aide

0
Linh