開發環境：React+ts+antd
你可能經常需要通過 JavaScript 的數組方法 來操作數組中的數據，從而將一個數據集渲染成多個相似的組件。在這篇文章中，你將學會如何在 React 中使用 filter() 篩選需要渲染的組件和使用 map() 把數組轉換成組件數組。

1.如何通過 JavaScript 的 map() 方法從數組中生成組件
2. 如何通過 JavaScript 的 filter()篩選需要渲染的組件
3. 何時以及為何使用 React 中的 key

從數組中渲染數據

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 的函數）的篩選，最終返回一個只包含滿足條件的項的新數組。

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 語句。

const listItems = chemists.map(person =><li>...</li> // 隱式地返回！
);

不過，如果你的 => 后面跟了一對花括號 { ，那你必須使用 return 來指定返回值！

const listItems = chemists.map(person => { // 花括號return <li>...</li>;
});

箭頭函數 => { 后面的部分被稱為 “塊函數體”，塊函數體支持多行代碼的寫法，但要用 return 語句才能指定返回值。假如你忘了寫 return，那這個函數什么都不會返回！

運行結果:

此時控制臺報錯是因為我在li標簽處未加上key值,當我加上key值后

<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。