react采用forEach或map两种方式遍历数组

2023-11-13

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

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

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;

在这里插入图片描述
欢迎大家关注我的微信公众号
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react采用forEach或map两种方式遍历数组 的相关文章

  • import cv2

    windows下 环境 Python 3 8 5 可以通过一下指令查看 python version 遇到的坑 1 在程序中 import cv2 无报错 但运行程序没有效果 直接程序退出 直到注释掉该句导入 程序才正常测试 直接在命令行中
  • Java版的数据结构——栈和队列

    目录 1 栈 Stack 1 1 概念 1 2 栈的使用 1 3 栈的模拟实现 1 4 栈的应用场景 1 4 1 改变元素的序列 1 4 2 将递归转化为循环 2 队列 Queue 2 1 概念 2 2 队列的使用 2 3 队列模拟实现 2

随机推荐

  • 4G 网络跟 5G 的区别

    1 5G网络的速度据说保守可以达到4G的10 20倍 下载一些大型文件 例如电影 大型电脑游戏 将会是分分钟的事 2 5G网络将会率先使用云RAN和虚拟RAN这样的新架构 以促进一个更加中心化网络的建立 并通过身处网络边缘的本地化数据中心来
  • 微信小程序 getUserProfile直接进入fail函数,getUserProfile调用失败:fail desc length does not meet the requirements

    问题描述 我刚开始的getUserProfile的desc是这么写的 wx getUserProfile desc 获取你的昵称 头像 地区及性别用于信息注册 success res gt console log res console l
  • c语言中函数的声明和定义

    点击上方蓝字关注我 了解更多咨询 1 函数声明 无需实现该函数的功能 函数声明只是一个空壳 不会有特定的函数实现 2 函数定义 必须实现该函数的功能 要实现函数的实现 include
  • 动作/行为识别调研

    动作识别调研 1 简介 1 1 基本概念 1 2 难点 2 人体动作识别系统 2 1 传统方法 2 1 1 iDT框架 2 2 深度学习方法 2 2 1 Two Stream双流架构 2 2 2 3D卷积架构 2 2 3 CNN LSTM架
  • 【C++】匿名对象

    文章目录 一 基本概念 二 使用场景 三 注意事项 一 基本概念 匿名对象 也叫作临时对象 就是创建时不用取名的对象 它的生命周期只有一行 例子 class A int main 创建匿名对象 A 生命周期只有这一行 下一行就自动调用析构函
  • 如何在 seaborn 中创建三角相关热图?

    在本教程中 我们将学习在 seaborn 中创建三角形相关热图 顾名思义 相关性是一种度量 用于显示变量的相关程度 相关热图是一种表示数值变量之间关系的图 这些图用于了解哪些变量彼此相关以及它们之间的关系强度 而热图是使用不同颜色的数据的二
  • css text-shadow

  • 喜讯

    日前 华院计算因其在AIGC领域的技术突破和创新成果入选数据猿 2023中国AIGC领域最具商业合作价值企业盘点 基于其数智人产品及解决方案 为不同细分场景 行业 领域提供交互式智能终端 虚拟直播平台和智能视频生成平台等产品及服务 凭借其在
  • 【PKMS】- Settings中应用详情页卸载还原系统应用但数据未清除

    PKMS Settings中应用详情页卸载还原系统应用但数据未清除 一 问题描述 最近工作中出现一个问题 系统应用卸载后重装还原发现应用数据还在 复现操作 1 系统预置该应用在system priv app下 手机里预置的是旧版本的该应用
  • 隐私计算 FATE - 多分类神经网络算法测试

    一 说明 本文分享基于 Fate 使用 横向联邦 神经网络算法 对 多分类 的数据进行 模型训练 并使用该模型对数据进行 多分类预测 二分类算法 是指待预测的 label 标签的取值只有两种 直白来讲就是每个实例的可能类别只有两种 0 或者
  • calico单个pod固定IP多pod固定ip池

    原理 主要利用calico组件的两个kubernetes注解 1 cni projectcalico org ipAddrs 2 cni projectcalico org ipv4pools 单个pod固定IP 利用注解cni proje
  • SpringSecurity实现OAuth2.0 - 基础版授权服务

    OAuth2 0协议 OAuth3 0概述 OAuth2 0是一个关于授权的开放网络协议 该协议在第三方应用与服务提供平台之间设置了一个授权层 第三方应用需要服务资源时 并不是直接使用用户帐号密码登录服务提供平台 而是通过服务提供平台的授权
  • Python求100以内的素数和并输出

    求100以内的素数并输出 def isPrime num for i in range 2 num if num i 0 return False return True sum 2 1不是素数 2是素数 对 3 100 内的整数逐一进行判
  • Sublime Text 3 tab快捷键失效解决办法

    快速搭建html框架快捷键 tab发现失效 查资料发现缺少Emmet插件 解决办法如下 1 Ctrl Shift P 搜索package control install 2 按下回车搜索emmet 3 安装emmet 4 安装完成后可通过P
  • 【第01题】A + B

    文章目录 零 写在前面 一 例题1 1 题目描述 2 解题思路 3 代码详解 二 例题2 1 题目描述 2 解题思路 3 代码详解 三 例题3 1 题目描述 2 解题思路 3 代码详解 四 例题4 1 题目描述 2 解题思路 3 代码详解
  • Unity 简单几句代码实现无限循环列表(Scroll View)

    先看效果 这里是Scroll View的设置 using System Collections using System Collections Generic using UnityEngine using UnityEngine UI
  • 第三章 套接字相关数据结构--基于Linux3.10

    本章是对socket通信过程中使用到的比较重要的据结构罗列和意义的阐述 在阅读其它层的代码前 先来看几个重要的数据结构 这几个数据结构贯串四层模型 3 1 socket对应的内核结构体 在用户空间使用socket 函数创建一个套接字 对应的
  • 数据中台模块介绍

    搭建一款集数据采集 存储 搜索 加工 分析为一体的海关外贸企业大数据平台 融合结构化数据 非结构化数据 实现了统一数据架构 对海量异构数据的存储归档 信息组织 搜索访问 安全控制 分析可视化 以及数据挖掘 数据治理等 如图1所示 1 数据分
  • URAL 1981. Parallel and Perpendicular 对角线的平行和垂直

    1981 Parallel and Perpendicular Time limit 0 5 second Memory limit 64 MB You are given a regular n gon Your task is to c
  • react采用forEach或map两种方式遍历数组

    之前写代码 从后台提取数据并渲染到前台 由于有多组数据 用map遍历会相对方便一点 但是 map不能遍历array数组 只能遍历object对象 所以如果遇到这样的问题可以采用forEach试一下 forEach import React