React 中的 for 迴圈
處理複雜的後端資料是前端開發人員工作的一部分。通常，資料包括代表 UI 的元件或其他構建塊的物件列表。
例如，在建立線上商店時，資料可能包含需要出現在網站上的產品列表。由於多種原因，手動檢視列表並一個一個地建立元件是低效的。例如，如果某個產品被刪除或新增到列表中，你會怎麼做？你不能每次都回去更新你的 JSX 檔案。
有多種方法可以遍歷列表並自動呈現元件或 HTML 元素。
在 React 中使用 .map() 方法實現 for Map
ES6 中引入的 .map() 方法是迴圈陣列並返回一個有效的 JSX 元素的預設方法，該元素包含來自陣列中每個專案的資料。開發人員通常使用此方法來建立自定義元件以及常規 HTML 元素。
儘管還有其他方法來執行迴圈，但大多數 React 開發人員使用 .map() 方法，因為它易於閱讀、編寫和維護。以下是如何遍歷物件陣列並將使用者資料呈現到螢幕上：
class App extends Component {
render() {
const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
console.log('App started');
return <div>
{data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
</div>
}
}
輸出：
John Doe, 44 years old
Jane Doe, 45 years old
請記住，map() 方法在本示例中將執行兩次，每次都返回一個段落元素。這就是為什麼必須用 <div></div> 包裝其結果的原因。每個元件都必須返回一個父容器，擁有任意數量的子元素。
key 屬性
請記住，使用 .map() 方法建立的每個元素都必須有一個 key 識別符號，並設定為唯一值。
<p key={person.name}>{}</p>)
React 不建議使用 index 值來為 key 屬性生成唯一值。
傳遞 props
如果你打算使用 .map() 方法來渲染多個元件，你也可以傳遞 props。
假設我們正在嘗試渲染多個 Product 元件。以下是我們如何傳遞 props：
return <div>
{data.map(product => <Product price={product.price} name={product.name}></Product>)}
</div>
JavaScript for 迴圈
迴圈陣列的另一種方法是使用 for 迴圈。如果你選擇這種方法，你必須在 return 塊上方執行迴圈。
程式碼如下所示：
class App extends Component {
render() {
const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
let persons = [];
for (let i = 0; i<data.length; i++){
persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
}
return <div>
{persons}
</div>
}
}
與 .map() 相比，這種方法更加冗長且難以理解。但是，結果將是相同的。
立即呼叫的函式
在 return 語句中使用 for 迴圈在技術上是可行的，但是你必須建立一個函式並使用 for 迴圈作為主體。一旦你寫完函式，你應該在它後面加上括號 () 以立即呼叫它。這是它的工作原理：
class App extends Component {
render() {
const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
return
<div>
{function() {
let persons = []
for (let i = 0; i<data.length; i++){
persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
}
return persons
}()
}</div>
}
}
Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn