列表渲染

用 map 和 key 產生列表

重點

要把陣列排列在畫面上，就用 map。它會替陣列的每一項套上同樣結構的 JSX
map 排出來的最外層元素，要加上各不相同的 key（名牌）
key 要用 id 這類「只屬於這一項的值」。陣列的索引（index）在排序或刪除時會錯位，最好避免

動手試試

const fruits = [
  { id: 1, name: "蘋果", price: 45 },
  { id: 2, name: "香蕉", price: 30 },
  { id: 3, name: "橘子", price: 24 },
]

export default function App() {
  return (
    <ul style={{ padding: 16 }}>
      {fruits.map((fruit) => (
        <li key={fruit.id}>
          {fruit.name}：NT${fruit.price}
        </li>
      ))}
    </ul>
  )
}

Open Sandbox

在陣列裡加上「葡萄」（畫面上也會自動多出來）
只顯示價格在 NT$30 以上的水果（提示：在 map 之前用 filter）
刪掉 key={fruit.id}，看看 Console 會出現什麼

常見錯誤

key 要加在「最外層」

key 要加在 map 回傳的最外層元素上。如果用 <Link> 包住 <Card>，key 就加在 <Link> 上。

每個 key 都要不同

如果值相同（例如全都是「第 1 部分」），React 就分不出哪個是哪個。要用 id 或 slug 這類每一項獨有的值。