列表渲染

用 map 和 key 生成列表

要点

要把数组显示在页面上，用 map。它会给数组的每一项套用同样结构的 JSX
map 渲染出的最外层元素，要加上互不相同的 key（名牌）
key 要用 id 这类“只属于这一项的值”。数组的序号（index）在排序或删除时会错位，最好避免

动手试试

const fruits = [
  { id: 1, name: "苹果", price: 10.5 },
  { id: 2, name: "香蕉", price: 7 },
  { id: 3, name: "橘子", price: 5.6 },
]

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

Open Sandbox

往数组里加上“葡萄”（页面上也会自动多出来）
只显示价格在 ¥7 以上的水果（提示：在 map 之前用 filter）
删掉 key={fruit.id}，看看 Console 里会出现什么

常见错误

key 要加在“最外层”

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

每个 key 都要不同

如果值相同（例如全都是“第 1 部分”），React 就分不清哪个是哪个。要用 id 或 slug 这类每一项独有的值。