zoukankan      html  css  js  c++  java
  • react采用forEach或map两种方式遍历数组

    转载:

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    原文链接:https://blog.csdn.net/dayexiaofan/article/details/86707074

    之前写代码,从后台提取数据并渲染到前台,由于有多组数据,用map遍历会相对方便一点,但是
    map不能遍历array数组,只能遍历object对象。

    所以如果遇到这样的问题可以采用forEach试一下

    import React,{Component} from 'react';
    let list=[
      {
        name:"百度",
        address:"http://www.baidu.com"
      },
      {
        name:"google",
        address:"http://www.google.cn"
      },
      {
        name:"firefox",
        address:"https://home.firefoxchina.cn"
      }
    ];
    class forEach extends Component{
      render(){
        //定义一个数组,将数据存入数组
        const elements=[];
        list.forEach((item)=>{
          elements.push(
            <div>
              {item.name}&nbsp;
              <a>{item.address}</a>
              <hr/>
            </div>
          )
        });
        return(
          <div>
            {elements}
          </div>
        )
      }
    }
    export default forEach;

    map

    import React,{Component} from 'react';
    let list=[
      {
        name:"百度",
        address:"http://www.baidu.com"
      },
      {
        name:"google",
        address:"http://www.google.cn"
      },
      {
        name:"firefox",
        address:"https://home.firefoxchina.cn"
      }
    ];
    class forEach extends Component{
      render(){
        return(
        list.map((item)=>
            <div>
              {item.name}&nbsp;
              <a>{item.address}</a>
              <hr/>
            </div>
          )
        )
      }
    }
    export default forEach;

    谢谢

  • 相关阅读:
    NOI2015 寿司晚宴
    bzoj3456 城市规划
    DDP入门
    HAOI2018 染色
    曹冲养猪
    采药
    跳跳棋
    基础复习笔记-最短路

    康熙环球
  • 原文地址:https://www.cnblogs.com/notchangeworld/p/11691188.html
Copyright © 2011-2022 走看看