通过对象数组与一个嵌套对象数组进行映射

时间:2018-12-12 17:43:36

标签: javascript reactjs ecmascript-6 functional-programming

我有一个对象数组,每个对象包含两个元素以及应该出现在元素中的链接数组。

const array = [
    {
      text: "x",
      icon: "x",
      links: [
        { link: "www.google.com", title: "ABC" },
        { link: "www.linkedin.com", title: "CDE" },
      ],
    },
    {
      text: "y",
      icon: "y",
      links: [
        { link: "www.twitter.com", title: "Google" },
        { link: "www.facebook.com", title: "Linkedin" },
      ],
    },
  ];

这是我的回报

{array.map((item, i) => {
          return (
            <div key={i}>
              <div>
                <div>{item.icon}</div>
                <div>{item.text}</div>
              </div>
              <div>
                {item.links.map((links, i) => (
                  <a className={STYLES.link} key={i} href={link.link}>
                    <div>{link.title}</div>
                  </a>;
                })}
              </div>
            </div>
          );
        ))}

需要能够将第一个链接对象从链接数组(即{ link: "www.twitter.com", title: "Google" },)中拉出,我希望它出现在顶部列表中,并包裹在不同的div中以指示粘性样式。

2 个答案:

答案 0 :(得分:0)

您应该将testNav替换为您已经从地图获得的唯一项作为第一个参数。同样,在第二张地图中,您进行=> {,如果这样做,则需要在其中具有return关键字。如果将{替换为(,则不需要。

{nav.map((item, i) => {
          return (
            <div key={i}>
              <div>
                <div>{item.icon}</div>
                <div>{item.text}</div>
              </div>
              <div>
                {item.links.map((itemLink, i) => (
                  <a className={STYLES.link} key={itemLink.link} href={itemLink.link}>
                    <div>{itemLink.title}</div>
                  </a>;
                ))}
              </div>
            </div>
          );
        })}

答案 1 :(得分:0)

我不确定您提出的解决方案中的strings[0] = [Winter] strings[1] = [Bash] strings[2] = [Is] strings[3] = [Here] variables[0].i = [Winter] variables[1].i = [Bash] variables[2].i = [Is] variables[3].i = [Here] p->i: Winter ++p->i: inter p->i: inter p++->i: inter p->i: Bash *p->i++: 66 p->i: ash *p->i++: 97 p->i: sh (*p->i)++: 115 p->i: th *p++->i: 116 p->i: Is strings[0] = [Winter] strings[1] = [Bath] strings[2] = [Is] strings[3] = [Here] variables[0].i = [inter] variables[1].i = [th] variables[2].i = [Is] variables[3].i = [Here] 是什么。 尝试将def run_threads(self): # Parallelize calcs with 4 subprocesses with Pool(processes=4) as pool: p1 = pool.apply_async(self.run, (0, int(self.width / 2), 0, int(self.width / 2))) p2 = pool.apply_async(self.run, (0, int(self.width / 2), int(self.width / 2), self.width)) p3 = pool.apply_async(self.run, (int(self.width / 2), self.width, 0, int(self.width / 2))) p4 = pool.apply_async(self.run, (int(self.width / 2), self.width, int(self.width / 2), self.width)) r1 = (p1.get(timeout=10)) r2 = (p2.get(timeout=10)) r3 = (p3.get(timeout=10)) r4 = (p4.get(timeout=10)) #r2 = self.run(0, int(self.width / 2), int(self.width / 2), self.width) for i in range(0, int(self.width / 2)): for j in range(0, int(self.width / 2)): self.values[i, j] = r1[i,j] for i in range(0, int(self.width / 2)): for j in range(int(self.width / 2), self.width): self.values[i, j] = r2[i,j] for i in range(int(self.width / 2), self.width): for j in range(0, int(self.width / 2)): self.values[i, j] = r3[i,j] for i in range(int(self.width / 2), self.width): for j in range(int(self.width / 2), self.width): self.values[i, j] = r4[i,j] 替换为testNav。我尚未测试此代码,但我想它看起来像这样:

testNav

您可能要考虑重命名属性,因为item.links的描述性不是很好。