在 React 中使用 for 迴圈

當陣列中包含產品、使用者或其他記錄時，React 可以為每個項目呈現一個元素或元件。通常會使用 .map()，將每筆資料轉換成一個元素；如果明確的步驟能讓處理方式更清楚，也可以使用 JavaScript for 迴圈。這兩種方法都會產生 React 能夠呈現的元素陣列。

在 React 中使用 .map() 呈現清單

先準備要顯示的資料。以下是獨立的 JavaScript 範例，會將每項產品轉成文字標籤；它不會使用 React，也不會掛載元件。下方輸出是這段 JavaScript 範例實際觀察到的結果。

const products = [
  { id: "mug", name: "Ceramic mug", price: 12 },
  { id: "notebook", name: "Notebook", price: 8 },
];

const labels = products.map((product) => `${product.name}: $${product.price}`);
console.log(labels.join("\n"));

Ceramic mug: $12
Notebook: $8

撰寫 JSX 時，可以將相同資料對應成元素：products.map((product) => <li key={product.id}>{product.name}: ${product.price}</li>)。再把回傳的陣列放進清單所在的標記中，例如 <ul>{products.map((product) => <li key={product.id}>{product.name}</li>)}</ul>。React 可以直接呈現這個陣列，因此只有在頁面結構需要時才加入包裝元素。這些 JSX 片段說明 React 的呈現方式，並未包含在上方 JavaScript 執行證據中。

你也可以將每筆記錄對應成可重複使用的元件。先定義 function ProductCard(props) { return <li>{props.name}: ${props.price}</li>; }，再透過 products.map((product) => <ProductCard key={product.id} name={product.name} price={product.price} />) 呈現元件。子元件會在 props 物件中收到 name 和 price，並讀取這些值來組成輸出。你也可以改為傳入整筆記錄，例如 product={product}，然後在元件內讀取 props.product.name 和 props.product.price。請依照元件所需資料，選擇清楚易懂的介面。

每個由 .map() 產生的同層元素都需要一個 key；它在同層元素之間必須唯一，且同一筆記錄應維持相同的值，通常使用資料中的 ID。若清單項目可能新增、刪除或重新排序，請避免使用陣列索引：清單變動後，同一索引可能指向不同記錄，導致 React 把元件狀態對應到錯誤的項目。React 會在更新時利用 key 配對清單元素；key 不會作為 prop 傳給子元件。關於 key 和清單呈現方式，請參閱 React 的清單呈現指南。

使用 JavaScript for 迴圈

如果你想透過明確的步驟組合元素，JavaScript for 迴圈會很實用。在元件中，先於 return 前初始化陣列，再為每項產品推入一個含有 key 的元素，最後將陣列放入回傳的標記中。以下是逐行撰寫的完整元件，並使用前面宣告的 products 資料：

function ProductList() {
const items = [];
for (let i = 0; i < products.length; i += 1) {
const product = products[i];
items.push(<li key={product.id}>{product.name}: ${product.price}</li>);
}
return <ul>{items}</ul>;
}

這個元件是 React／JSX 說明範例，並不屬於已執行的 JavaScript 範例。元件準備回傳結果時會執行迴圈；陳述式不能直接放在 JSX 中。若只是要將每筆資料轉成一個元素，.map() 通常更精簡，也更容易看出資料與元素之間的對應關係。如果建立結果需要多個陳述式或條件步驟，迴圈可能更清楚。無論採用哪種方式，回傳的元素都應使用穩定的 key。

使用立即呼叫函式

立即呼叫函式運算式（IIFE）可以在 JSX 運算式中放入陳述式，但它並不是常見的清單呈現方式。例如，JSX 運算式 {(() => { const items = []; for (let i = 0; i < products.length; i += 1) { const product = products[i]; items.push(<li key={product.id}>{product.name}</li>); } return items; })()} 會立即建立並回傳一個陣列。這只是語法示意，並非實際執行的 React 範例。請將回傳值放在 return 的同一行，或用括號括起來；若在 return 後立即換行，JavaScript 的自動分號插入可能會讓函式回傳 undefined。一般清單使用 .map()，或在元件的 return 前先建立陣列，會更容易閱讀與維護。