React 列表渲染

你可能经常需要通过 JavaScript 的数组方法 来操作数组中的数据,从而将一个数据集渲染成多个相似的组件。在这篇文章中,你将学会如何在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。

1.如何通过 JavaScript 的 map() 方法从数组中生成组件

  1. 如何通过 JavaScript 的 filter()筛选需要渲染的组件

  2. 何时以及为何使用 React 中的 key

从数组中渲染数据

javascript 复制代码
import React from "react";

const people = [
    {
        id: 0,
        name: '凯瑟琳·约翰逊',
        profession: '数学家',
    },
    {
        id: 1,
        name: '马里奥·莫利纳',
        profession: '化学家',
    },
    {
        id: 2,
        name: '穆罕默德·阿卜杜勒·萨拉姆',
        profession: '物理学家',
    },
    {
        id: 3,
        name: '珀西·莱温·朱利亚',
        profession: '化学家',
    },
    {
        id: 4,
        name: '苏布拉马尼扬·钱德拉塞卡',
        profession: '天体物理学家',
    },
];

const App: React.FC = () => {
    const listItems = people.map(person =>
        <li>{person.name} : {person.profession}</li>
    );
    return <ul>{listItems}</ul>;
}
export default App;

运行结果如下:

JavaScript 的 filter()筛选需要渲染的组件

现在,假设你只想在屏幕上显示职业是 化学家 的人。那么你可以使用 JavaScript 的 filter() 方法来返回满足条件的项。这个方法会让数组的子项经过 "过滤器"(一个返回值为 true 或 false 的函数)的筛选,最终返回一个只包含满足条件的项的新数组。

javascript 复制代码
import React from "react";

const people = [
    {
        id: 0,
        name: '凯瑟琳·约翰逊',
        profession: '数学家',
    },
    {
        id: 1,
        name: '马里奥·莫利纳',
        profession: '化学家',
    },
    {
        id: 2,
        name: '穆罕默德·阿卜杜勒·萨拉姆',
        profession: '物理学家',
    },
    {
        id: 3,
        name: '珀西·莱温·朱利亚',
        profession: '化学家',
    },
    {
        id: 4,
        name: '苏布拉马尼扬·钱德拉塞卡',
        profession: '天体物理学家',
    },
];

const App: React.FC = () => {
    const chemists = people.filter(person =>
        person.profession === '化学家'
    );
    const listItems = chemists.map(person =>
        <li>{person.name} : {person.profession}</li>
    );
    return <ul>{listItems}</ul>;
}
export default App;

注意

因为箭头函数会隐式地返回位于 => 之后的表达式,所以你可以省略 return 语句。

javascript 复制代码
const listItems = chemists.map(person =>
  <li>...</li> // 隐式地返回!
);

不过,如果你的 => 后面跟了一对花括号 { ,那你必须使用 return 来指定返回值!

javascript 复制代码
const listItems = chemists.map(person => { // 花括号
  return <li>...</li>;
});

箭头函数 => { 后面的部分被称为 "块函数体",块函数体支持多行代码的写法,但要用 return 语句才能指定返回值。假如你忘了写 return,那这个函数什么都不会返回!

运行结果:

此时控制台报错是因为我在li标签处未加上key值,当我加上key值后

javascript 复制代码
<li key={person.id}>{person.name} : {person.profession}</li>

控制台就不会报错了

用 key 保持列表项的顺序

注意

直接放在 map() 方法里的 JSX 元素一般都需要指定 key 值!

这些 key 会告诉 React,每个组件对应着数组里的哪一项,所以 React 可以把它们匹配起来。这在数组项进行移动(例如排序)、插入或删除等操作时非常重要。一个合适的 key 可以帮助 React 推断发生了什么,从而得以正确地更新 DOM 树。

如何设定 key 值

不同来源的数据往往对应不同的 key 值获取方式:
来自数据库的数据: 如果你的数据是从数据库中获取的,那你可以直接使用数据表中的主键,因为它们天然具有唯一性。
本地产生数据: 如果你数据的产生和保存都在本地(例如笔记软件里的笔记),那么你可以使用一个自增计数器或者一个类似 uuid 的库来生成 key。

key 需要满足的条件

key 值在兄弟节点之间必须是唯一的。 不过不要求全局唯一,在不同的数组中可以使用相同的 key。

key 值不能改变,否则就失去了使用 key 的意义!所以千万不要在渲染时动态地生成 key。

相关推荐
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴4 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust5 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
全宝6 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele6 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮6 小时前
【无标题】
开发语言·前端·javascript
fie88896 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式