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 (
{this.state.ToDoList.map((item,index)=>{
return - {item}
})}
)
}
}2、直接用数组调用 map() 方法，return 返回你想要得的内容，以及绑定 key 值。
-
{this.state.ToDoList.map((item,index)=>{
return
- {item} })}
2.1 这里为了方便所以绑定的key值是数组的下标，实际使用中不建议这么做，因为React中Diff算法进行组件对比时，调用的key是数组下标的话，数组的改变，会导致下标对应的数组内容不正确，比如
TP-COUPON 导购系统 免费版
下载
自从百度屏蔽淘宝客网站、淘宝抛弃淘宝客之后，个人站长集体陷入了恐慌之中。此时，什么值得买网的异军突起引起了广大个人站长的极大关注。做一个什么值得买一样的导购网站成了众多个人站长的一致心愿！ TP-COUPON 导购系统 即是让个人站长实现此心愿的绝佳选择！ 欢迎个人站长选用。V1.1版 更新记录：1.修正请求时查询淘宝店铺错误的bug2.删除一些无用的代码
[1,2,3] ，将1删除之后变成 [2,3],
原来下标0对应的1, 下标1对应2，下标2对应3，改变之后下标0对应的2，下标1对应的3.显然这会对Diff算法进行两个虚拟DOM对比时造成困扰，因为id相同的情况下对应的内容却不一样了，失去了id的意义。因此不建议使用数组下标作为key值。这是根据自己理解写的，可以有些错误的理解，反正大概是这个意思，有错误的地方望指正。
3.运行结果如下图
推荐学习：《react视频教程》
