Day20 React 回圈渲染多个元件

进行专案常需要把从API获取的资讯转成阵列，把阵列里的每项物件资料，用回圈套在元件上，依序渲染多个元件呈现在画面上。

React中利用map()这个函式，把为原本资料阵列的每一个元素进行变更後，回传新的回圈阵列。

产生回圈阵列

我们来写一个菜单当范例：

在Menu.js里先准备一个菜单的阵列资料

const dateList = [
	{id:1,food:'鸡排汉堡'},
	{id:2,food:'炒饭'},
	{id:3,food:'牛肉面'}
]

使用map()，将原本阵列里的物件转成子元件或jsx语法的回圈阵列。

Array.map((item)=>{ ... })

• Array：原始资料阵列
• item：自订名称的参数（要改成value、data随自己开心），代表阵列里的元素项目
• ...：要使用的子元件 or jsx语法

使用元件

/* List子元件 */
function List(prop){
    return(
    <li key={prop.id}>
      {prop.food}
    </li>)
  }

//元件
dateList.map((item)=> <List key={item['id']} food={item.food} />)

使用jsx语法

//jsx语法，不用设List元件的function了

dateList.map((item)=> <li key={item.id}> {item.food} </li> )

在父元件中写入回圈

成功使用map()产生新阵列後，我们有两个写法可以将这回圈加入父元件中

父元件的function

function Menu(){
    return(
    <div>
        <h1>方法一菜单</h1>
        <ul className="wrapper">
            { dateList.map((item)=>{ return <List key={item['id']} food={item.food} />})}
        </ul>
        <h1>方法二菜单</h1>
        <ul className="wrapper">
            {  menu }
        </ul>
    </div>
    )
}

写法一：在父元件的JSX中进行回圈

function Menu(){
    return(
    <div>
        <h1>菜单</h1>
        <ul className="wrapper">
            { dateList.map((item)=> <List key={item['id']} food={item.food} />)}
        </ul>
    </div>
    )
}

//这里直接用子元件进行回圈

写法二：宣告变数接回圈阵列，在父元件中使用变数渲染

//宣告变书
const menuItem = dateList.map((item)=> <li key={item.id}>{item.food}</li> )

function Menu(){
    return(
    <div>
        <h1>菜单</h1>
        <ul className="wrapper">
            { menuItem }      
        </ul>
    </div>
    )
}

//这里用jsx语法进行回圈

最後一个很重要的重点：

一定要在回圈的产生每个DOM标签上加上key属性

dateList.map((item)=> <List key={item['id']} food={item.food} />)
														 ↑
												 key一定要加

key 是作为 React 分辨哪些项目被改变、增加或删除的辨别码，同个回圈阵列里的每个key不可以有重复的。

最好是使用在原本阵列里加上不重复的id或其他只有单一的值来当key。如果原本阵列没有可以当key的项目，可以使用map提供的每个物件索引参数index。

const menuItem = dateList.map((item,index)=> <li key={index}>{item.food}</li> )

但较不建议使用index索引做key，因为当操作对阵列进行变动，项目的顺序是会改变，这会对效能产生不好的影响，也可能会让 component state 产生问题。

下面是这边的范例code

import React from 'react'
import './Menu.css'

const dateList = [{id:1,food:'鸡排汉堡'},{id:2,food:'炒饭'},{id:3,food:'牛肉面'}]

function List(prop){
    return(
    <li key={prop.id}>
      {prop.food}
    </li>)
  }

//宣告变数
// const menu = dateList.map((item)=>{ return <List key={item['id']} food={item.food} />})

//or 纯jsx语法
const menuItem = dateList.map((item)=>{ 
    return <li key={item.id}>{item.food}</li> })

function Menu(){
 
    return(
    <div>
        <h1>写法一菜单</h1>
        <ul className="wrapper">
            { dateList.map((item)=> <List key={item['id']} food={item.food} />)}
        </ul>
        <h1>写法二菜单</h1>
        <ul className="wrapper">
            {  menuItem }
        </ul>
    </div>
    )
}

export default Menu;