使用.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()显示第二个参数是index,紧邻currentValue.如何改变现有代码来获取第二个参数？

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

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

希望有帮助

Answer 3

要小心,如果列表是动态的,你不应该使用索引作为键,它是反模式的,可能会导致麻烦.

如果您确定在创建后不必删除或添加项目,则应仅使用索引作为键(如果添加项目但仅在列表末尾添加项目仍然可以接受,并且仍然永远不会删除).否则React可能会遇到纠正你孩子的问题.

最佳做法是为所有待办事项(增量或UUID)添加"id",并将其用作所有需要它的反应列表的键.