使用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迭代两个数组 的相关文章

随机推荐

  • 如何使用 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