在react中map方法用于什么，使用有什么要注意的

在react中，map方法用于遍历和显示组件的类似对象列表；map方法并不是react特有的，可以在任何数组上调用标准的JavaScript函数，map方法通过对调用数组的每个元素调用提供的函数来创建数组。

本教程操作环境：Windows10系统、react17.0.1版、Dell G3电脑。

react中map方法怎么用

map是一种数据集合类型，其中数据以对的形式存储。它包含一个唯一的键，存储在映射中的值必须映射到键。我们不能在map()中存储重复的对，这是因为每个存储的键都是惟一的，它主要用于快速搜索和查找数据。

在React里map方法用于遍历和显示组件的类似对象列表，map不是React特有的，相反，它是可以在任何数组上调用的标准JavaScript函数。map()方法通过对调用数组中的每个元素调用提供的函数来创建新数组。

例子

在给定的示例中，map()函数接受一个数字数组并将其值加倍，我们将map()返回的新数组分配给变量doubleValue并记录它。

var numbers = [1, 2, 3, 4, 5];
       
const doubleValue = numbers.map((number)=>
{
       
    return (number * 2);
   
}
    );
       
console.log(doubleValue);
    

在React中，map()方法用于:

1. 遍历列表元素。

例子

import React from 'react';
       
import ReactDOM from 'react-dom';
   
  
function NameList(props) {
      
  const myLists = props.myLists;
      
  const listItems = myLists.map((myList) =>
      
    li>
{
myList}
    /li>
      
  );
      
  return (  
    div>
      
          h2>
    React Map例子/h2>
      
              ul>
{
listItems}
    /ul>
      
    /div>
      
  );
  
}
      
const myLists = ['A', 'B', 'C', 'D', 'D'];
   
ReactDOM.render(  
  NameList myLists={
myLists}
     />
    ,  
  document.getElementById('app')  
);
      
export default App;
    

2. 用键遍历列表元素。

例子

import React from 'react';
       
import ReactDOM from 'react-dom';
   
  
function ListItem(props) {
      
  return li>
{
props.value}
    /li>
    ;
  
}
  
  
function NumberList(props) {
      
  const numbers = props.numbers;
      
  const listItems = numbers.map((number) =>
  
    ListItem key={
number.toString()}
  
              value={
number}
     />
      
  );
      
  return (  
    div>
      
      h2>
    React Map例子/h2>
      
          ul>
 {
listItems}
     /ul>
      
    /div>
      
  );
  
}
      
  
const numbers = [1, 2, 3, 4, 5];
  
ReactDOM.render(  
  NumberList numbers={
numbers}
     />
    ,  
  document.getElementById('app')  
);