Javascript 反应，使用 .map 和索引

React, using .map with index

提问by ilrein

I have a simple React component like so:

我有一个简单的 React 组件，如下所示：

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;

I can see that the docs for Array.prototype.map()shows that the second argument is index, next to currentValue. How does one alter the existing code to pick up the second argument?

我可以看到文档Array.prototype.map()显示第二个参数是索引，在 currentValue 旁边。如何更改现有代码以获取第二个参数？

回答by Timur Bilalov

You need to to this:

你需要这样做：

todos.map((key, index) => { ... })without object brackets for arguments.

todos.map((key, index) => { ... })没有对象括号作为参数。

({todo, index}) => { ... }- that syntax means that you want to get properties todoand indexfrom first argument of function.

({todo, index}) => { ... }- 该语法意味着您想要获取属性todo和index函数的第一个参数。

You can see syntax here:

您可以在此处查看语法：

Basic syntax

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

Advanced syntax

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

基本语法

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

高级语法

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

回答by Mijamo

Be careful, you should not use the index as a key if the list is dynamic, it is antipatternand could lead into troubles.

请注意，如果列表是动态的，则不应使用索引作为键，它是反模式的，可能会导致麻烦。

You should use the index as a key ONLY if you are sure you will not have to delete or add items to your todos after creation (it could still be acceptable if you add items but only at the end of the list, and still never delete). Otherwise React might run into problems reconciliating your children.

仅当您确定在创建后不必删除或添加项目到待办事项时，您才应该使用索引作为键（如果您添加项目但仅在列表末尾添加项目仍然可以接受，并且仍然永远不会删除）。否则，React 可能会遇到让孩子和解的问题。

The best practise is to add an "id" to all your todos (incremental or UUID) and use it as the key for all the react lists that need it.

最佳实践是为所有待办事项（增量或 UUID）添加一个“id”，并将其用作所有需要它的反应列表的键。

回答by Phan Van Linh

Here is a example base on @Timur Bilalov answer to make easy to understand

这是一个基于@Timur Bilalov 答案的示例，以便于理解

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

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

Output

输出

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

Reference
https://reactjs.org/docs/lists-and-keys.htmlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

参考
https://reactjs.org/docs/lists-and-keys.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Hope it help

希望有帮助