react.js 通过js map方法将新匹配的数组值推送到已有数组中

Question

我正在编写代码以创建带有 API 数据的 Web 视图以显示在 window 中，但遇到了一些问题。谁能帮我解决这个问题？

可能是我英语不好让你看得懂，我拍了一些我想拍的照片。

首先，我有一个这样的数组

const arr1 = [
  {name: 'AAA', no: 23},
  {name: 'BBB', no: 42},
  {name: 'CCC', no: 33},
  {name: 'DDD', no: 90},
  {name: 'EEE', no: 101},
  {name: 'FFF', no: 10},
]

我将它的名称映射到 div h2 标题，而不是 p 标签。这是目前的情况
enter image description here

现在我创建了一个新的数组，将更多的p标签添加到div中，数组的形状是这样的。

const arr2 = [
  {letter: 'text1', no: 90},
  {letter: 'text2', no: 90},
  {letter: 'text3', no: 23},
  {letter: 'text4', no: 42},
  {letter: 'text5', no: 101},
  {letter: 'text6', no: 10},
  {letter: 'text7', no: 90},
  {letter: 'text8', no: 90},
]

我真正想做的是，找到 arr1.no === arr2.no 的元素并像这张图片一样添加到 p 标签之后。

enter image description here

我想要的;

如果arr2没有arr1对应的号码，则进行下一个
如果 arr2 有多个元素到 arr1 的 no 之一，则应将其添加到 p 标签后面。

所以我这样编码，

arr1.map((c, i) => {  
  arr2.map((v, j) => {
      if (c.no === v.no) {
          test.innerText = 'this title has letter: ' + c.no;
      }
  })
})

我知道我必须制作 2 个映射来匹配这 2 个数组，但这不起作用。所有 'this title has letter' returns 相同的数字。谁能告诉我我错过了什么？

Answer 1

为了达到你想要的效果，你可以先通过 arr1 数组映射并显示标题和编号，然后在 arr2 数组上使用过滤器来获取具有相同编号和通过结果映射并显示字母。您可以查看下面的代码以便更好地理解。很简单。

export default function App() {
  const arr1 = [
    { name: "AAA", no: 23 },
    { name: "BBB", no: 42 },
    { name: "CCC", no: 33 },
    { name: "DDD", no: 90 },
    { name: "EEE", no: 101 },
    { name: "FFF", no: 10 }
  ];
  const arr2 = [
    { letter: "text1", no: 90 },
    { letter: "text2", no: 90 },
    { letter: "text3", no: 23 },
    { letter: "text4", no: 42 },
    { letter: "text5", no: 101 },
    { letter: "text6", no: 10 },
    { letter: "text7", no: 90 },
    { letter: "text8", no: 90 }
  ];

  return (
    <div>
      {arr1.map((arr) => (
        <div key={arr.name} style={{ border: "1px solid black",padding:"5px 10px", margin:"5px 0" }}>
          <p>Title : {arr.name}</p>
          <p>The title has number : {arr.no}</p>
          {arr2
            .filter((ar2) => ar2.no === arr.no)
            .map((ar2) => (
              <p key={ar2.letter}>The title has letter: {ar2.letter}</p>
            ))}
        </div>
      ))}
    </div>
  );
}

react.js 通过js map方法将新匹配的数组值推送到已有数组中

react.js push new matched values of array into existing one by js map method

javascript

reactjs