我正在從我的資料庫中獲取一個陣列，我正在嘗試將它映射到輪播中，每張幻燈片必須有 2 個元素，下一張幻燈片也是 2 個元素，依此類推。我將在代碼中解釋這一點。這是陣列的 JSON 格式：
{
"data": {
"allPrismicBlog": {
"nodes": [
{
"data": {
"author": "Darius Aeres",
"date": "15 Aug 2022"
}
},
{
"data": {
"author": "Ahmed Jalal",
"date": "13 June 2022"
}
},
{
"data": {
"author": "Djalal Aymani",
"date": "8 June 2022"
}
},
{
"data": {
"author": "Jane Cooper",
"date": "3 Aug 20"
}
},
{
"data": {
"author": "Khalid Sayed",
"date": "16 Aug 2022"
}
},
{
"data": {
"author": "Mohammed Yaakoubi",
"date": "1 July 2022"
}
},
{
"data": {
"author": "Karim Baghta",
"date": "5 May 2022"
}
},
{
"data": {
"author": "Jacob Sefrioui",
"date": "15 Aug 2022"
}
}
]
}
},
"extensions": {}
}
這就是我試圖映射幻燈片的方式：
<Carousel>
{allBlogs.nodes.slice(0, Math.round(allBlogs.nodes.length/2)).map((node,index)=>
(
<Slide>
{allBlogs.nodes.slice(index, 2).map((blog)=>
(
<BlogAuthor>
<Author>{blog.data.author}</Author>
<BlogDate>{blog.data.date}</BlogDate>
</BlogAuthor>
)
)}
</Slide>
)}
</Carousel>
所以在這個陣列映射中是有目的的，但錯誤是我沒有得到我的全部blog，例如在第一張幻燈片中它將成功顯示陣列的 2 個第一個元素，在第二張幻燈片中它只會得到一個單個元素，它將具有第一張幻燈片的最后一個元素 (1) 的索引。我需要一種方法來解決這個問題，以便在每個幻燈片中相應地顯示陣列中的 2 個元素！我希望你確實理解了這個問題。
uj5u.com熱心網友回復：
我認為您正在嘗試使用slice將陣列nodes分成兩對 - 但這不是slice作業方式。它只會給你一個陣列，它是nodes.
查看此答案以了解如何將陣列拆分為兩個元素對：
const nodePairs = allBlogs.nodes.reduce(
(result, value, index, array) => {
if (index % 2 === 0)
result.push(array.slice(index, index 2));
return result;
}, []);
在您的陣列上使用此函式nodes，然后遍歷這些對：
nodePairs.map(pair => (
<Slide>
{pair.map((blog) => (
<BlogAuthor>
<Author>{blog.data.author}</Author>
<BlogDate>{blog.data.date}</BlogDate>
</BlogAuthor>)
}
</Slide>))
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/491983.html
標籤：javascript 反应