在 React 的 map() 函数中使用 map()

作者

在 React 的 map() 函数中使用 map()

Use a map() inside a map() function in React

在 React 的 map() 函数中使用 map() ：

  1. 调用map()外部数组，向其传递一个函数。
  2. 在每次迭代中，调用map()另一个数组上的方法。
应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', tasks: ['dev', 'test', 'ship']},
    {id: 2, name: 'Bob', tasks: ['design', 'test']},
    {id: 3, name: 'Carl', tasks: ['test']},
  ];

  return (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>Name: {employee.name}</h2>

            {employee.tasks.map((task, index) => {
              return (
                <div key={index}>
                  <h2>Task: {task}</h2>
                </div>
              );
            })}

            <hr />
          </div>
        );
      })}
    </div>
  );
}

我们传递给
Array.map
方法的函数将使用数组中的每个元素和当前迭代的索引进行调用。

在每次迭代中，我们渲染对象的name属性employee并使用 nestedmap()遍历taskseach 的数组employee。

请注意，在map()我们的 JSX 代码中调用该方法时，我们必须使用大括号{}将对map().

这仅在您的 JSX 代码中需要，并向 React 发出信号，表明我们正在编写一个必须求值的表达式。

我们在对方法的两次调用中都使用了带有显式返回语句的箭头函数
map()。如果你只需要渲染一些 JSX 元素而不使用条件、声明变量等，你可以使用隐式返回，这将使你的代码更具可读性。

应用程序.js
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', tasks: ['dev', 'test', 'ship']},
    {id: 2, name: 'Bob', tasks: ['design', 'test']},
    {id: 3, name: 'Carl', tasks: ['test']},
  ];

  return (
    <div>
      {employees.map((employee, index) => (
        <div key={index}>
          <h2>Name: {employee.name}</h2>

          {employee.tasks.map((task, index) => (
            <div key={index}>
              <h2>Task: {task}</h2>
            </div>
          ))}

          <hr />
        </div>
      ))}
    </div>
  );
}

我们对传递给
map()方法的两个箭头函数都使用了隐式返回。

应用程序.js
const arr = ['a', 'b', 'c'];

// 👇️ explicit return
const result1 = arr.map(element => {
  return element;
});

// 👇️ implicit return
const result2 = arr.map(element => element);

当您不必在传递给 的函数中使用条件或定义变量时，您只能使用隐式返回map()。

我们在示例中使用了indexfor keyprop，但是如果你有的话，最好使用一个稳定的唯一标识符。我们可以id在每个对象上使用该属性。

key出于性能原因，React 在内部使用该prop。它帮助库确保只重新呈现已更改的数组元素。

话虽如此，除非您处理成千上万的数组元素，否则您不会看到任何明显的差异。

–

发表评论