從兩個不同的數據源映射

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 解決的問題：你會過於依賴它。