React JS：循環遍歷數組並每 3 個項目創建一個 div

Question

基本上，我很難解釋我想要完成的事情。 我有一個 JSON 有效負載，它等於：

{
    "user": {
        "id": 4,
        "username": "3nematix2",
        "profile_pic": "http://192.168.0.29:8000/..."
    },
    "id": 47,
    "type": 3,
    "latitude": "10.512055",
    "longitude": "51.512061",
    "type_str": "TRIPOD",
    "status_str": "APPROVED",
    "status_color": "green",
    "attached_message": "testas2",
    "marker_icon": "https://i.imgur.com/VDUPhLx.png",
    "attached_photo": "http://192.168.0.29:8000/..."
}

我有這些卡片：

所以問題是這些卡片在包裝器中並且包裝器需要 3 張卡片來制作一個完整的行，如果我像這樣映射到我的有效負載（下面的代碼），該行將是完整的但具有相同的 JSON 對象來自大批。 如果使用下面的代碼，這就是它的外觀：

const ActiveReports = ({title, payload}) => {

    const payloadLength = payload.length;

    return (
        <ReportContainer id="reports">
            <ReportH1>Active Reports</ReportH1>
                { payload.map(report => (
                    <ReportWrapper>
                            <ReportCard>
                                <ReportIcon src={report.marker_icon} />
                                <ReportH2>{report.id}</ReportH2>
                                <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
                            </ReportCard>
                        
                            <ReportCard>
                                <ReportIcon src={report.marker_icon} />
                                <ReportH2>{report.id}</ReportH2>
                                <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
                            </ReportCard>


                            <ReportCard>
                                <ReportIcon src={report.marker_icon} />
                                <ReportH2>{report.id}</ReportH2>
                                <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
                            </ReportCard>
                    </ReportWrapper> 
                )) }
        </ReportContainer>
    )
}

如您所見，一行中的元素與當前正在映射的對象重復。 我需要的是這個：

Answer 1

您需要使用reduce將您的項目數組分組為 3 組。

下面是一個例子：

 const GROUP_SIZE = 3; const items = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const groupedItems = items.reduce( (acc, item) => { if (acc[acc.length - 1].length >= 3) { return [...acc, [item]]; } acc[acc.length - 1].push(item); return acc; }, [[]] ); console.log(groupedItems);

然后，您將能夠映射分組的項目以根據需要呈現卡片。

const ActiveReports = ({ title, payload }) => {
  const groupedItems = payload.reduce(
    (acc, item) => {
      if (acc[acc.length - 1].length >= 3) {
        return [...acc, [item]];
      }
      acc[acc.length - 1].push(item);
      return acc;
    },
    [[]]
  );

  return (
    <ReportContainer id="reports">
      <ReportH1>Active Reports</ReportH1>
      {groupedItems.map((group) => (
        <ReportWrapper>
          {group.map((report) => (
            <ReportCard>
              <ReportIcon src={report.marker_icon} />
              <ReportH2>{report.id}</ReportH2>
              <ReportP>
                Officer will perform a Quick search of Valid Driver's License
                and any signs of Intoxication.
              </ReportP>
            </ReportCard>
          ))}
        </ReportWrapper>
      ))}
    </ReportContainer>
  );
};

Answer 2

僅使用一張報告卡進行映射。 不是 3. 現在你有

<ReportCard>
 <ReportIcon src={report.marker_icon} />
 <ReportH2>{report.id}</ReportH2>
 <ReportP>Officer will perform a Quick search of Valid Driver's License and any signs of Intoxication. </ReportP>
</ReportCard>

在每個塊中 3 次，您將其稱為 ergo 9 瓷磚 3 次。