[英]React JS: Looping through an array and creating a div each 3 items
Basically, It's a bit hard for me to explain what I'm trying to accomplish.基本上,我很难解释我想要完成的事情。 I have a JSON payload which is equal to this:
我有一个 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/..."
}
And I have these cards :我有这些卡片:
So the thing is that these cards are in the wrapper and the wrapper requires 3 cards to make a full line, if I would map into my payload like this (code below), the line will be full but with the same JSON object from the array.所以问题是这些卡片在包装器中并且包装器需要 3 张卡片来制作一个完整的行,如果我像这样映射到我的有效负载(下面的代码),该行将是完整的但具有相同的 JSON 对象来自大批。 This is what it looks if used the code below:
如果使用下面的代码,这就是它的外观:
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>
)
}
As you can see the elements in one line duplicates with the object which is currently being mapped.如您所见,一行中的元素与当前正在映射的对象重复。 What I need is this:
我需要的是这个:
You'll need to group your array of items into groups of 3 using reduce .您需要使用reduce将您的项目数组分组为 3 组。
Here's an example:下面是一个例子:
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);
You'll then be able to map over the grouped items to render the cards as needed.然后,您将能够映射分组的项目以根据需要呈现卡片。
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>
);
};
Only use one Report Card for Mapping.仅使用一张报告卡进行映射。 Not 3. Right now you have
不是 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>
three times in each block and you call it three times ergo 9 tiles.在每个块中 3 次,您将其称为 ergo 9 瓷砖 3 次。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.