对于我的react 和打字,我还是个新手.我有一些我想要映射的图标:

const iconLookups =
    dataPackNumber1.map(
      (e) =>
        e.icon_prefix &&
        e.icon_name && {
          prefix: e.icon_prefix,
          iconName: e.icon_name,
        },
    ) as IconLookup[];

此外,我有更多的图标下dataPackNumber2dataPackNumber3看起来是一样的,我想把它们一次绘制出来.我考虑的另一种方法是将它们分开映射,然后将它们推入iconLookups数组,但我似乎想不出怎么做.

iconLookups.push(
    dataPackNumber.map(
      (e) =>
        e.icon_prefix &&
        e.icon_name && {
          prefix: e.icon_prefix,
          iconName: e.icon_name,
        },
    ) as IconLookup[];) 

const iconLookups =
    dataPackNumber1 && dataPackNumber2 && dataPackNumber3.map(
      (e) =>
        e.icon_prefix &&
        e.icon_name && {
          prefix: e.icon_prefix,
          iconName: e.icon_name,
        },
    ) as IconLookup[];

代码没有给我提供错误,但在UI上我可以看到,如果我用&&链接它们,那么实际上只会呈现最后提供的dataPackNumber个.

有谁能给我开导一下吗?

推荐答案

.push()将把one element推送到数组上.在本例中,该元素是一个完整的array.结果是这样的 struct :

[1, 2, [3, 4, 5]]

&&很可能只会解析到最后一个表达式,在您的例子中,它只有dataPackNumber3.map(/*...*/).

将这三者结合在一起的一种方法是使用扩展语法.从 struct 上看,它类似于:

let result = [...array1, ...array2, ...array3];

因此,在您的情况下,可能是:

const iconLookups = [
  ...dataPackNumber1,
  ...dataPackNumber2,
  ...dataPackNumber3.map(/*...*/)
] as IconLookup[];

Edit:如所指出的in a comment below,.push() can在作为多个参数添加时,确实将多个元素添加到数组中:

arr1.push(3, 4, 5);

这意味着传播语法也可以在那里运行:

const iconLookups = dataPackNumber1.map(/*...*/) as IconLookup[];
iconLookups.push(...dataPackNumber2.map(/*...*/));
iconLookups.push(...dataPackNumber3.map(/*...*/));

Javascript相关问答推荐

你怎么看啦啦队的回应?

如何在文本字段中输入变量?

在Java中寻找三次Bezier曲线上的点及其Angular

如何在Svelte中从一个codec函数中调用error()?

如何将zoom 变换应用到我的d3力有向图?

在FAQ Accodion应用程序中使用React useState时出现问题

Phaserjs-创建带有层纹理的精灵层以自定义外观

更改agGRID/Reaction中的单元格格式

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

如果对象中的字段等于某个值,则从数组列表中删除对象

如何用react组件替换dom元素?

使用Java脚本筛选数组中最接近值最小的所有项

已在EventListener中更新/更改异步的React.js状态对象,但不会导致组件重新呈现

try 导入material 时出现错误NG0203

如何在通过JavaScript添加图像后将其删除?

如何在Angular中运行没有哈希的项目

如果用户的页面宽度低于某个阈值,如何使用js更改html页面中的css文件

Reactjs创建新选项卡而不是新窗口

如何获取获取器列表

为什么我需要从另一个模块调用一个对象两次?