react中map的用法是什麼

react中map的用法：1、使用「{this.state.ToDoList.map((item,index)=>{return

{item}})}」語法循環顯示一個陣列ToDoList；2、用陣列呼叫「map()」方法，return傳回想要得的內容即可。

本教學操作環境：Windows10系統、react18.0.0版、Dell G3電腦。

react中map的用法是什麼？

React 中 map() 方法的使用，以及 key 值的綁定。

1、這裡以一個迴圈顯示一個陣列ToDoList的範例來展示。

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       ToDoList:[1,2]
    }
  }
  
  render() {
    return (
      <div>
        <input></input><button>提交</button>
        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

2、直接用陣列呼叫 map() 方法，return 傳回你想要得到的內容，以及綁定 key 值。

        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>

2.1 這裡為了方便所以綁定的key值是數組的下標，實際使用中不建議這麼做，因為React中Diff演算法進行組件對比​​時，調用的key是數組下標的話，數組的改變，會導致下標對應的數組內容不正確，例如

[1,2,3] ，將1刪除之後變成[2,3],

原來標0對應的1, 下標1對應2，下標2對應3，改變之後下標0對應的2，下標1對應的3.顯然這會對Diff演算法進行兩個虛擬DOM對比時造成困擾，因為id相同的情況下對應的內容卻不一樣了，失去了id的意義。因此不建議使用陣列下標作為key值。這是根據自己理解寫的，可以有些錯誤的理解，反正大概是這個意思，有錯誤的地方望指正。

3.運行結果如下圖

推薦學習：《react影片教學》

以上是react中map的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！