反应，使用带有索引的 .map答案

【问题标题】：React, using .map with index反应，使用带有索引的 .map
【发布时间】：2016-07-26 05:57:46
【问题描述】：

我有一个像这样的简单 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;

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

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

输出

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

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

希望对你有帮助

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

虽然我的目标是使用 Mongo 提供的 _id 来测试功能，但我意识到我需要先了解 es6 .map 的工作方式。
我明白你的意思。仅供参考， map 不是 ES6 特有的，但箭头函数是。从很久以前的IE9开始，您可以在所有浏览器中使用.map。

【解决方案3】：

你需要这样做：

todos.map((key, index) => { ... }) 参数不带对象括号。

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

可以看到语法here:

基本语法

(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

【讨论】：