javascript - 来自两个不同数据源的映射

Question

我有一个带有以下 JSX 的 React 功能组件:

import React from "react";

const Parent = () => {
  const arr1 = ["123", "456"];
  const arr2 = ["abc", "def"];

  return (
    <div>
      {arr1.map((item) => {
        return <div>{item}</div>;
      })}
      {arr2.map((item) => {
        return <div>{item}</div>;
      })}
    </div>
  );
};

export default Parent;

我需要这个组件来渲染的是:

"123"
"abc"
"456"
"def"

相反，它返回:

"123"
"456"
"abc"
"def"

我试图用 for 循环得到结果，但由于某种原因它在加载功能组件时没有被触发，所以我正在寻找一个涉及 .map() 。有没有办法通过 .map() 获得所需的结果？

注意:数组的长度总是相等的，因此被接受的答案。

Answer 1

假设两个数组的长度相同:

<div>
  {arr1.map((item, index) => (<>
    <div>{item}</div>
    <div>{arr2[index]}</div>
   </>);
  )}
</div>