React，使用带索引的.map

React, using .map with index

本文关键字：索引 map React      更新时间：2024-02-10

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

您需要这样做：

参数不带对象括号的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

下面是一个基于帖木儿·比拉洛夫答案的例子，以便于理解。

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.htmlhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

希望它能帮助

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

只有当您确信在创建后不必删除项目或将项目添加到待办事项中时，才应将索引用作键（如果您只在列表末尾添加项目，并且仍然从不删除，则这仍然是可以接受的）。否则，React可能会遇到与孩子和解的问题。

最佳实践是在所有todo（增量或UUID）中添加一个"id"，并将其用作所有需要它的反应列表的密钥。

相关文章：