【React 學習筆記 EP.05】列表渲染

什麼是列表渲染？

列表渲染是指利用 JavaScript 的陣列方法，將一組資料動態轉換為對應的 JSX 元素。用於處理重複性結構，例如：留言板、商品清單等，能大幅減少重複程式碼。

列表渲染基礎語法

1. map() 方法：React 慣用 JavaScript 的 .map() 來遍歷陣列，並回傳新的 JSX 元素陣列
2. Key 屬性：必須為每個生成的項目加上獨一無二的 key 屬性，幫助 React 在重新渲染時追蹤每個項目，判斷哪些被新增、移除或需要更新
3. 資料來源：通常來自後端 API 回傳的 JSON 資料（常見為物件陣列），或前端定義的靜態資料

常見錯誤與解決方法

1. 使用 Index 作為 Key：當列表順序改變或刪除項目時會導致狀態錯位，建議僅在資料無 ID 且唯讀時才勉強使用索引。
2. 忘記 Return：在 map 使用大括號 {} 卻忘記寫 return 導致畫面空白，建議改用圓括號 () 進行隱式回傳。

const users = [
  { id: 'u_001', name: '阿明', role: '管理員' },
  { id: 'u_002', name: '小美', role: '設計師' },
  { id: 'u_003', name: '傑哥', role: '工程師' },
];

const UserList = () => {
  return (
    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
      <h3>團隊成員名單</h3>

      <ul>
        {/* 使用 map 遍歷 users 陣列，轉換為 li 元素 */}
        {/* key 必須設在最外層元素，且需為穩定且唯一的 ID */}
        {users.map((user) => (
          <li key={user.id} style={{ marginBottom: '8px' }}>
            <span style={{ fontWeight: 'bold' }}>{user.name}</span>
            <span> - {user.role}</span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;