从两个不同的数据源映射

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()获得所需的结果？

注意： arrays 的长度总是相等的，因此接受的答案。

Answer 1

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

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

Answer 2

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

Answer 3

尝试这个。

你想要做的是同时遍历两个 arrays ，并将两者的每个值存储到一个新数组中，如下所示。

我只添加了这些长度检查，以防 arrays 的大小不同。

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

  let arr3 = [];

  if(arr1.length == arr2.length){
      for(let i =0;i<arr1.length;i++){
        arr3.push(arr1[i]);
        arr3.push(arr2[i]);    
      }
  }

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

一些资源：

• 反应循环
• 循环初学者指南

Answer 4

您无法单独使用map ：它保留了源数组的结构，因此您将获得相同数量的元素，这不是您想要的，但您可以使用flatMap

arr1.flatMap((x, i) => [x, arr2[i]])

我想补充一点，我认为这不是你应该用 React 解决的问题：你会过于依赖它。