React遍历数组的2种方式foreach和map

背景：

需要将数组的数据全部展现出来。

详细代码

import React from "react";

let family =[ 
    {
      name:"爷爷",
      age:"80"
    },
    {
      name:"爸爸",
      age:"50"
    },
    {
      name:"小明",
      age:"30"
    },
    {
        name:"孙子",
        age:"7"
      }
  ];


class Test extends React.Component{
    constructor(props){
        super(props);
        this.comp={
            userInfo:["Test","Demo1","G1"],
            list:[
                {title:"hello"},
                {title:"hi"},
                {title:"你好"}
                ]
        }       
    }

render(){
    //第一种遍历方式循环遍历数组  map方式
    let result = this.comp.userInfo.map(function(value,key){
        return <li key={key}>{value}</li>
        })

    //第二种遍历方式循环遍历数组  foreach方式
   const arrays=[];
   family.forEach((item)=>{
    arrays.push(
      <div>
        {item.name}&nbsp;
        <a>{item.age}岁</a>
        <hr/>
      </div>
      )
      });
   
    return(
        <div>         
            <h1>这是一个Test组件</h1>            
            <hr></hr>
            {/* 第一种遍历方式循环遍历数组 */}
            <ul>
                {result}
            </ul>
             {/* 第一种遍历方式循环遍历数组   简写法 */}
            <ul>
              {
                this.comp.list.map(function(value,key){
                 return (<li key={key}>{value.title} </li>);
                })
              }
            </ul>
            <hr></hr>  
             {/* 第二种遍历方式循环遍历数组  */}
             <br />          
             {arrays}
        </div>        
    )
}
}
export default Test;