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>

Answer 2

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

Answer 3

试试这个。

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

我只添加了那些长度检查，以防数组的大小不同。

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：它保留了源数组的结构，因此您将获得相同数量的元素，这不是您想要的，但您可以使用 {{1 }}

flatMap

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

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

4 个答案: