反应，使用 .map 和索引

Question

我有一个像这样的简单 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。如何更改现有代码以获取第二个参数？

原文由 ilrein 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你需要这样做：

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

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

你可以 在这里 看到语法：

基本语法

(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

原文由 Timur Bilalov 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是一个基于@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

希望有帮助

原文由 Linh 发布，翻译遵循 CC BY-SA 4.0 许可协议