渲染列表

从数组中渲染数据

🌐 Rendering data from arrays

假设你有一个内容列表。

🌐 Say that you have a list of content.

<ul>
  <li>Creola Katherine Johnson: mathematician</li>
  <li>Mario José Molina-Pasquel Henríquez: chemist</li>
  <li>Mohammad Abdus Salam: physicist</li>
  <li>Percy Lavon Julian: chemist</li>
  <li>Subrahmanyan Chandrasekhar: astrophysicist</li>
</ul>

这些列表项之间唯一的区别是它们的内容，它们的数据。在构建界面时，你通常需要使用不同的数据展示相同组件的多个实例：从评论列表到个人资料图片图库。在这些情况下，你可以将这些数据存储在 JavaScript 对象和数组中，并使用像 map() 和 filter() 这样的方法从中渲染组件列表。

🌐 The only difference among those list items is their contents, their data. You will often need to show several instances of the same component using different data when building interfaces: from lists of comments to galleries of profile images. In these situations, you can store that data in JavaScript objects and arrays and use methods like map() and filter() to render lists of components from them.

以下是如何从数组生成条目列表的简短示例：

🌐 Here’s a short example of how to generate a list of items from an array:

1. 将数据移动到数组中：

const people = [
  'Creola Katherine Johnson: mathematician',
  'Mario José Molina-Pasquel Henríquez: chemist',
  'Mohammad Abdus Salam: physicist',
  'Percy Lavon Julian: chemist',
  'Subrahmanyan Chandrasekhar: astrophysicist'
];

2. 将 people 成员映射到一个新的 JSX 节点数组中，listItems：

const listItems = people.map(person => <li>{person}</li>);

3. 从你的组件中 listItems 返回，并用 <ul> 封装:

return <ul>{listItems}</ul>;

这是结果：

🌐 Here is the result:

请注意上面的沙箱显示控制台错误：

🌐 Notice the sandbox above displays a console error:

你将会在本页稍后学习如何修复这个错误。在此之前，让我们给你的数据添加一些结构。

🌐 You’ll learn how to fix this error later on this page. Before we get to that, let’s add some structure to your data.

过滤条目数组

🌐 Filtering arrays of items

这些数据甚至可以更加结构化。

🌐 This data can be structured even more.

const people = [{
  id: 0,
  name: 'Creola Katherine Johnson',
  profession: 'mathematician',
}, {
  id: 1,
  name: 'Mario José Molina-Pasquel Henríquez',
  profession: 'chemist',
}, {
  id: 2,
  name: 'Mohammad Abdus Salam',
  profession: 'physicist',
}, {
  id: 3,
  name: 'Percy Lavon Julian',
  profession: 'chemist',  
}, {
  id: 4,
  name: 'Subrahmanyan Chandrasekhar',
  profession: 'astrophysicist',
}];

假设你想要一种方法，只显示职业是 'chemist' 的人。你可以使用 JavaScript 的 filter() 方法来返回仅包含这些人的数组。这个方法接受一个项目数组，通过“测试”（一个返回 true 或 false 的函数）来处理它们，并返回一个只包含通过测试的项目（返回 true）的新数组。

🌐 Let’s say you want a way to only show people whose profession is 'chemist'. You can use JavaScript’s filter() method to return just those people. This method takes an array of items, passes them through a “test” (a function that returns true or false), and returns a new array of only those items that passed the test (returned true).

你只想要那些 profession 为 'chemist' 的项目。用于此的“测试”函数看起来像 (person) => person.profession === 'chemist'。以下是如何组合它的方法：

🌐 You only want the items where profession is 'chemist'. The “test” function for this looks like (person) => person.profession === 'chemist'. Here’s how to put it together:

1. 创建 一个只包含“化学家”人员的新数组 chemists，方法是对 people 调用 filter()，按 person.profession === 'chemist' 进行过滤：

const chemists = people.filter(person =>
  person.profession === 'chemist'
);

2. 现在在 chemists 上 映射:

const listItems = chemists.map(person =>
  <li>
     <img
       src={getImageUrl(person)}
       alt={person.name}
     />
     <p>
       <b>{person.name}:</b>
       {' ' + person.profession + ' '}
       known for {person.accomplishment}
     </p>
  </li>
);

3. 最后，从你的组件中返回 listItems：

return <ul>{listItems}</ul>;

const listItems = chemists.map(person =>
  <li>...</li> // Implicit return!
);

const listItems = chemists.map(person => { // Curly brace
  return <li>...</li>;
});

使用 key 保持列表项的顺序

🌐 Keeping list items in order with key

请注意，上面的所有沙箱都在控制台中显示错误：

🌐 Notice that all the sandboxes above show an error in the console:

你需要给每个数组项一个 key —— 一个在该数组中唯一标识它的字符串或数字：

🌐 You need to give each array item a key — a string or a number that uniquely identifies it among other items in that array:

<li key={person.id}>...</li>

键告诉 React 每个组件对应数组中的哪一项，以便它之后能够将它们匹配起来。如果你的数组项可能会移动（例如由于排序）、被插入或被删除，这一点就显得很重要。一个选择得当的 key 可以帮助 React 推断究竟发生了什么，并对 DOM 树进行正确的更新。

🌐 Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

与其即时生成键，不如将它们包含在数据中：

🌐 Rather than generating keys on the fly, you should include them in your data:

import { Fragment } from 'react';

// ...

const listItems = people.map(person =>
  <Fragment key={person.id}>
    <h1>{person.name}</h1>
    <p>{person.bio}</p>
  </Fragment>
);

在哪里获取你的 key

🌐 Where to get your key

不同的数据来源提供不同的键来源：

🌐 Different sources of data provide different sources of keys:

• 来自数据库的数据： 如果你的数据来自数据库，你可以使用数据库的键/ID，这些本质上是唯一的。
• 本地生成的数据： 如果你的数据是在本地生成和保存的（例如记事应用中的注意），在创建项目时使用递增计数器、crypto.randomUUID() 或类似 uuid 的软件包。

键的规则

🌐 Rules of keys

• 键在同级中必须唯一。 但是，在_不同_数组中的 JSX 节点使用相同的键是可以的。
• 键不能更改，否则就失去了它们的意义！渲染时不要生成它们。

为什么 React 需要键？

🌐 Why does React need keys?

想象一下，你桌面上的文件没有名字。相反，你会按顺序称呼它们——第一个文件、第二个文件，以此类推。你可能会习惯这种方式，但一旦你删除一个文件，就会变得混乱。第二个文件会变成第一个文件，第三个文件会变成第二个文件，以此类推。

🌐 Imagine that files on your desktop didn’t have names. Instead, you’d refer to them by their order — the first file, the second file, and so on. You could get used to it, but once you delete a file, it would get confusing. The second file would become the first file, the third file would be the second file, and so on.

文件夹中的文件名和数组中的 JSX 键具有相似的作用。它们让我们能够在同级元素中唯一标识一个项目。一个精心选择的键比数组中的位置提供更多信息。即使由于重新排序而更改了_位置_，key 仍然让 React 在整个生命周期中识别该项目。

🌐 File names in a folder and JSX keys in an array serve a similar purpose. They let us uniquely identify an item between its siblings. A well-chosen key provides more information than the position within the array. Even if the position changes due to reordering, the key lets React identify the item throughout its lifetime.