我如何使用 map 打印一個 arrays 數組，數組中的對象反應？

Question

我有一個功能組件，它接受一個 arrays 數組和對象，但我不知道如何訪問渲染返回的 function 中的數據

let dataItems = [
  [
    {
      data1: "1234",
      data2: "ABCD",
      data3: "5678",
      data4: "EFGH",
    },
    {
      data1: "10203040",
      data2: "A1B1C1D1",
      data3: "50607080",
      data4: "EFGH",
    },
    {
      data1: "6789",
      data2: "jklm",
      data3: "1000",
      data4: "EFGH",
    },
    {
      data1: "128",
      data2: "zwxy",
      data3: "5",
      data4: "lmno",
    },
  ],
  [
    {
      data1: "1234",
      data2: "ABCD",
      data3: "5678",
      data4: "EFGH",
    },
    {
      data1: "10203040",
      data2: "A1B1C1D1",
      data3: "50607080",
      data4: "EFGH",
    },
    {
      data1: "6789",
      data2: "jklm",
      data3: "1000",
      data4: "EFGH",
    },
    {
      data1: "128",
      data2: "zwxy",
      data3: "5",
      data4: "lmno",
    },
  ],
];

我試圖將數據傳遞給另一個組件以打印數據，但我不知道如何傳遞帶有 map function 的未命名數組。

我的代碼。

 dataItems.map((item, index) => {
  return ( 

{ item.content.map((c, i) =>
   <PrintComponent>
   )
    }

)
   })

我將使用 bootstrap 4 選項卡打印 4 個元素塊中的二維矩陣

我試圖像這樣顯示像這樣的二維數組的數據

第一行	排2	第三行	第4行
數據01	數據02	數據03	數據04
數據05	數據06	數據07	數據08

...

Answer 1

我解決了在地圖中制作組件的問題。

使用這條線

dataItems.map((item) => {
return item.map((items) => { console.log("data1", items.data1)});
});

給了我幾次數據，所以我只包含了一些切片一次

dataItems.slice(0, 1).map((item) => {
return item.map((items) => { console.log(items)});
});

Answer 2

為此，您必須使用多個地圖進行數據渲染。

例如：

dataItems.map((item) => {
return item.map((items) => { console.log("data1", items.data1)});
});