在React中每两个元素之后创建一个新的ul

Question

我正在制作一个食品订购网站。在首页上，我从数据库中获取所有食物图像，然后正如您在下面的代码中看到的那样，我使用文档。映射渲染所有的图像。问题是，我希望在ul标签中最多有两个图像，但现在所有的图像都放在一个ul中。因此，如果有6张图片，也会有3个ul。

<div className="cards__wrapper">
<ul className="cards__items">
{docs &&
docs.map((doc) => (
<CardItem
src={doc.url}
key={doc.id}
text={doc.imageText}
price={doc.price}
id={doc.id}
></CardItem>
))}
</ul>
</div>

Answer 1

可以将数组拆分为所需的块，并在此基础上呈现数据。我已经做了一个例子。你可以查看

分割功能

var chunks = function (array, size = 2) {
var results = [];
while (array.length) {
results.push(array.splice(0, size));
}
return results;
};
const data = chunks(lists, 2);

渲染:

{data.map((childs, index) => {
return (
<ul>
{childs.map((c, cindex) => {
return <li>{c + index + cindex}</li>;
})}
</ul>
);
})}

Answer 2

const docs = [1, 2, 3, 4, 5, 6, 7];
const ulArr = [];
docs.forEach((item, i, arr) => {
if (i % 2 !== 0) {
ulArr.push([arr[i - 1], item]); //add 2 elements ib Array
}
if (i == arr.length - 1) {
ulArr.push([item]) //add last element in last array
}
})

您需要通过ulArr遍历映射并返回一个包含LI元素的映射