迹忆客 专注技术分享

使用 map() 渲染嵌套数组：

1. 使用 map() 方法迭代外部数组。
2. 在每次迭代中，调用嵌套数组的 map() 方法。
3. 渲染嵌套数组的元素。

export default function App() {
  const people = [
    {id: 1, name: 'Alice', pets: ['dog', 'cat']},
    {id: 2, name: 'Bob', pets: ['turtle', 'rabbit']},
    {id: 3, name: 'Carl', pets: ['hamster', 'parrot']},
  ];

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

            {person.pets.map((pet, index) => {
              return (
                <div key={index}>
                  <h2>Pet: {pet}</h2>
                </div>
              );
            })}

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

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

在每次迭代中，我们渲染 person 对象的 name 属性并使用嵌套的 map() 来迭代每个 person 的 pets 数组。

注意 ，当在 JSX 代码中调用 map() 方法时，我们必须使用花括号 {} 来包装对 map() 的调用。

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

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

export default function App() {
  const people = [
    {id: 1, name: 'Alice', pets: ['dog', 'cat']},
    {id: 2, name: 'Bob', pets: ['turtle', 'rabbit']},
    {id: 3, name: 'Carl', pets: ['hamster', 'parrot']},
  ];

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

          {person.pets.map((pet, index) => (
            <div key={index}>
              <h2>Pet: {pet}</h2>
            </div>
          ))}

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

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

const arr = ['a', 'b', 'c'];

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

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

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

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

出于性能原因，React 在内部使用 key prop。 它有助于库确保仅重新渲染已更改的数组元素。

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