React-[入門篇]- 渲染列表 (rendering lists)

渲染列表這個動作會在React做超過百次以上，接下來就簡單介紹這個用法：

渲染列表

什麼時候會使用到渲染列表？？當我們有一個陣列資料，我們想要為陣列中的每個元素製作一個元件，例如：

我們有一個pizza的食譜資料，想為每一個食譜製作一個卡片，就像pizza店裡面的菜單顯示的那樣

先前是用重複地寫上Pizza的元件標籤給予不同的資料：

但以資料量來說，以這種半手工的方法，賣20種pizza就要手動寫入20個資料，也是挺費時的，這樣即使有props，但在Menu元件中要寫入的東西仍還是太繁雜了

所以現在要挑戰的就是：動態的渲染列表！也就是All At Once!

JavaScript .map() return 新陣列

結果出爐：

將上面的寫法結合props

可以知道在渲染列表的動作中，也就是map的回調函式中參數pizza，等同於是pizzaData陣列中的一筆物件資料
也可以就是直接在Pizza的元件標籤中寫上pizzaObj的props屬性，將每一筆物件資料作為其值：

回傳結果都有正確顯示出來，但出現一個紅字狀態：

也就是說我們所做的渲染列表的動作之後，有一個規則就是要給每一筆列表資料獨一無二的key值，做資料識別用

解構props

因爲每次都要在Pizza元件裡面寫入資料：{props.pizzaObj.name}
Js有物件解構的寫法：

const person = { firstName: 'John', lastName: 'Doe' };

const { firstName, lastName } = person;

console.log(firstName); // 輸出：John
console.log(lastName);  // 輸出：Doe

這裡以props解釋一下，當你想要解構嵌套的物件時，你可以使用嵌套的物件解構語法。以下是解構 props 物件中的 pizzaObj ：

const props = {
   pizzaObj: {
       name: "pizza funghi",
       price: 13,
       ingredients: "jjjj"
   }
};

const { pizzaObj } = props; //這裡就是下面圖片參數寫法
const { name, price, ingredients } = pizzaObj;

console.log(name);        // 輸出：pizza funghi
console.log(price);       // 輸出：13
console.log(ingredients);  // 輸出：jjjj