使用map迭代两个数组

2023-12-10

目前在 React 中,我正在使用array.map(function(text,index){})迭代数组。但是,我如何使用 map 同时迭代两个数组?

EDIT

var sentenceList = sentences.map(function(text,index){
            return <ListGroupItem key={index}>{text}</ListGroupItem>;
        })
return (
     <div>
       <ListGroup>
        {sentenceList}
      </ListGrouup>
   </div>
);

就像,在这个例子中,我希望每次迭代都在前面添加图标。我计划将这些图标放在另一个数组中。所以,这就是迭代两个数组的原因。


如果可能的话,我建议将文本与图像一起存储在对象数组中,例如:

const objects = [{text: 'abc', image: '/img.png' }, /* others */];

这样您就可以迭代数组并同时选择两个成员,例如:

objects.map(item => (<Component icon={item.image} text={item.text} />) )

如果这是不可能的,那么只需映射一个数组并通过当前索引访问第二个数组的成员:

sentences.map((text, index) => {
    const image = images[index];
    return (<Component icon={image} text={text} />);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用map迭代两个数组 的相关文章

  • 将 Javascript 变量转换为 PHP 变量

    我想使用由 videoel getCurrentTime 函数返回给我的 javascript 变量 并将其转换为 php 变量 以便我能够将其添加到我的 SQL 插入查询中 例如 INSERT INTO tblData VALUES ph
  • 如何使用 axios / jest 测试失败的请求

    我创建了一个非常小的应用程序 如果您传递硬币和数量 它可以计算为某些加密货币支付的总价格 我想测试错误 但我总是收到 收到的承诺已解决而不是被拒绝 我相信这是因为如果 url 错误 axios 仍然会解决承诺 我遇到的第二个问题是 我尝试测
  • 检查 DOM 元素是否为复选框

    如何检查给定的 DOM 元素是否为复选框 设想 我有一组文本框和复选框 其中的值是动态分配的 我没有办法识别 DOM 元素是复选框还是文本框 只使用普通的 javascript 你就可以做到 if el type el type check
  • GENERATE_SOURCEMAP=false,但仍然生成源代码

    我想在生产中隐藏 ReactJS 源代码 因此 在网上搜索一些信息使我找到了添加的简单解决方案 set GENERATE SOURCEMAP false react scripts build 到构建配置文件 This https stac
  • Google 饼图未显示所有数据行

    我正在尝试绘制人口与国家名称的关系图 我发现 Google 可视化库仅渲染前几个 实际上数字似乎是随机的 具体取决于我使用的数据 有时添加 其他 条目 但它没有t 实际上具有其余条目的值 Example 1 With all countri
  • 如何获取 RxJSSubject 或 Observable 的当前值?

    我有 Angular 2 服务 import Storage from storage import Injectable from angular2 core import Subject from rxjs Subject Inject
  • 如何从表中选择所有偶数 id?

    我想从 MySQL 数据库的表中选择所有甚至帖子 ID 然后显示它们 我还想获取所有带有奇怪 id 的帖子并将它们显示在其他地方 我想使用 PHP 来完成此操作 因为这是我使用的服务器端语言 或者 我是否必须选择所有帖子 然后使用 Java
  • 是否可以将反应组件导出为非反应项目中的函数

    有没有办法在非 React 项目中将 React 组件导出为函数并传入 props 作为函数的参数 我最近用 create react app 完成了一个 React 项目 现在我想将它用于其他非 React 项目 纯 Javascript
  • JQuery 动画文本

    找到简单 简单的动画文本是非常困难的 喜欢这个网站上的 内爆 http codecanyon net item jquery text animation full screen preview 233445 http codecanyon
  • 在 JavaScript 中比较表单中的两个数字

    当我尝试比较不同的数字时 数字发生变化 但文本部分保持不变 这只发生在较大 较小的情况下 而不会发生在 NaN 或相等的情况下 这是我的代码 function check var a document getElementById a va
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 引入 V8 后,Google Apps 脚本无法为其他用户完全执行

    我编写了一个脚本 得到了这里好心人的大力帮助 该脚本使用 Google Sheets 脚本复制 Google Drive 上的文件夹 和内容 它运行了很长一段时间 但后来我启用了 V8 引擎 现在已禁用 问题是 它仍然适用于我 也许还有其他
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • setInterval 内的返回值

    我想在 setInterval 内返回一个值 我只想以一定的时间间隔执行一些操作 这就是我尝试过的 function git limit var i 0 var git setInterval function console log i
  • 将 JavaScript 引擎嵌入到 .NET 中 [关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 只是想知道是否有人尝试过将任何 js 引擎嵌入并实际集成到 net 环境中 我可以找到并实际使用 经过L
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • Meteor.js 登录事件

    因此 我对 Meteor 框架和 JavaScript 总体来说还很陌生 但我正在使用该框架开发一个小项目 以尝试让自己达到标准 基本上我正在开发一个微博客网站 目前 用户可以通过多种服务登录 fb google 等 我通过插入所需 url
  • ThreeJS无法加载Json文件

    首先 我已经读过这个问题 https stackoverflow com questions 17201888 three js exporter export object not working with jsonloader r58没
  • Dojo/on 和捕获阶段

    有没有办法用 dojo on 在捕获阶段 而不是冒泡阶段 触发事件 我最终在这里寻找有关 on 的前身 dojo connect 的信息 就其价值而言 dojo connect 似乎不支持捕获阶段的事件侦听器 它的工作原理是将事件处理程序作
  • 获取淘汰赛中被点击元素的索引

    获取无序列表中单击元素的索引的最佳方法是什么 让我举个例子 假设我有以下 HTML 代码 ul li p p li ul 现在我有以下 javascript 代码来获取索引 self itemClicked function data it

随机推荐

  • 如何使用 SDL Tridion TOM.NET API 获取页面或组件的已发布时间戳

    我正在尝试使用 TOM NET API 获取给定页面或组件到给定目标的已发布时间戳 这并不是立即显而易见的Page or Component对象 有人能指出我正确的方向吗 您可以使用PublishEngine GetPublishInfo
  • 如何在Java中复制HashMap(不是浅复制)

    我需要复印一份HashMap
  • UI 之外用于 javascript 链接的闪亮模块命名空间

    我正在尝试使用闪亮的模块来重用 UI 和服务器代码来呈现共享相同演示文稿的三个不同数据集 在 UI 服务器代码之外使用基于 JavaScript 的模态弹出链接创建时 在处理命名空间时遇到了一些挑战 这是我的非工作应用程序代码 librar
  • 大括号扩展和参数扩展的顺序

    StackOverflow 上的常见比喻bash is 为什么不x 99 echo 1 x work 答案是 因为大括号在参数 变量之前展开 因此 我认为应该可以使用单个变量来扩展多个变量 和一个支架 我预计a 1 b 2 c 3 echo
  • 如何使 FlowLayout 包裹在其 JSplitPane 中?

    我编写此代码示例是为了说明我的程序遇到的问题 我希望能够将 JSplitPane 的滑块向左滑动 超出按钮的边缘 压缩 JPanel 并使 FlowLayout 将按钮包装到第二行 相反 JSplitPane 不允许我将滑块移过屏幕上最右边
  • 反序列化时的备用属性名称

    关于这个问题 使用 Json net 序列化时如何更改属性名称 当然 很好 但是我可以把蛋糕吃掉吗 我正在寻找一种令人赏心悦目的方式 为属性提供一个备用名称 使得字符串可以包含其中之一 就像是 BetterJsonProperty Prop
  • Android 构建错误

    当尝试在 Eclipse 中构建我的应用程序时 我遇到了这些错误 当编译器警告我我的 project 文件丢失时 事情开始走下坡路 然后我尝试修复该项目 现在收到以下错误 构建期间发生错误 在项目 net learn2develop Lay
  • 如何关闭 dropwizard 应用程序?

    我正在尝试使用 dropwizard 提出一个微服务 该文档讲述了如何启动应用程序 但没有提及如何优雅地终止它 例如 apache tomcat 都有启动and关闭脚本 那么有谁知道除了按之外如何终止 dropwizard 应用程序Ctrl
  • Python如何通过多重继承传递__init__参数

    我有这段代码 显示了经典的菱形图案 class A def init self x print A x class B A def init self x print B x super init b class C A def init
  • 如何从react调用存储过程

    我得到了一个已经用 ASP NET 开发的网站 我需要在 React 中开发同样的东西 下面是在 net 中编写的代码 用于在用户单击登录时调用存储过程 Dal objDal new Dal DataSet ds objDal ByText
  • c 编程 shmat() 权限被拒绝

    当我运行我的代码时遇到问题 我的 shmat 失败并且打印权限被拒绝 我在谷歌上搜索了如何解决它 但我不能 我的代码如下 include
  • AWS EMR 5.11.0 - Spark 上的 Apache Hive

    我正在尝试在 AWS EMR 5 11 0 上设置 Apache Hive on Spark Apache Spark 版本 2 2 1 Apache Hive 版本 2 3 2 纱线日志显示以下错误 18 01 28 21 55 28 错
  • C++ 数字加负数

    所以我只是练习编写斐波那契数列的动态解决方案 该解决方案将返回第 n 个斐波那契数 但我不断遇到一个我不太明白的问题 我得到两个正数加上一个负数 Code int fib int n vector
  • 使用 $window 配置 AngularJS 路由到深层路径

    我有一个 Rails 应用程序 其中有一些复杂的路由 我的 Angular 应用程序存在于深层 URL 中 例如 quizzes 1 我希望通过将 window 注入到我的路由配置中 然后嗅探 window location pathNam
  • ImportError:没有名为 sip 的模块(python2.7 PyQt4)

    我目前使用的是 Ubuntu 18 04 LTS 我正在尝试安装一个需要 PyQt4 和 QtWebKit 的程序 因此需要手动安装 因为 QtWebKit 已从 PyQt4 中排除 我下载了 sip 4 19 12 4 19 14 安装
  • 通过用逗号分隔的关键字突出显示文本

    我想用逗号分隔文本 即关键字如下 keyword1 keyword2 keyword3 keyword4 如何为每个以逗号分隔的关键字提供黑色样式元素 是否有捷径可寻 文本总是动态的 所以我永远不知道这些关键字到底是什么以及有多少 因此每个
  • 如何在tomcat中设置org.apache.tomcat.util.digester.EnvironmentPropertySource

    我想通过 Kubernetes 为 tomcat 中的 server xml 设置环境变量 这是我的部署 yaml apiVersion v1 kind Pod metadata name tomcat test pod env name
  • 如何使用 Greasemonkey 自动提交表单?

    我正在尝试使用greasemonkey 自动提交表单 但我不知道如何使用此按钮来完成此操作 该按钮似乎具有以下属性 a class blue button href javascript void 0 onclick Form submit
  • 标签栏中的自定义字体

    Hey 有没有办法将选项卡栏的字体设置为例如黑板 我已经看到了字体大小的问题 并尝试使用字体 但循环无法解决 如果无法使用自定义字体 是否可以删除所有文本并使选项卡栏的项目覆盖整个选项卡 或者我可以以某种方式将 imageView 放在选项
  • 使用map迭代两个数组

    目前在 React 中 我正在使用array map function text index 迭代数组 但是 我如何使用 map 同时迭代两个数组 EDIT var sentenceList sentences map function t