从函数 [反应引导] 显示卡组件的问题

Question

我在尝试使用 ReactJS 脚本渲染引导元素时遇到了一些麻烦。 为了给你我的用户案例，我必须根据从数据库创建的一些数据列表来显示卡片。然而，当我循环创建我的"卡片"以显示在"卡片桌"中时，我在浏览器上观察到"卡片组"是由反应正确生成的，而循环中的卡片元素似乎不是由渲染页面中的反应生成的。 到目前为止，我尝试使用数据列表以避免与数据库混合问题

function DisplayUnes(){
var i = 0
const nbrArticle = 3
const items = []
const idUnes =
[
1,
2,
3
]
const titleUnes =
[
]
const dateUnes =
[
]
const bodyUnes =
[
]
//string href to github storage
const imgUnes =
[
]
for(i = 0; i<nbrArticle; i++) {
items.push(
<div className="card" key={idUnes}>
<div className="card-body">
<h5 className="card-title">{titleUnes[i]}</h5>
<p className="card-text">{bodyUnes[i]}</p>
<a>{dateUnes[i]}</a>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>
)
}
return (items)
}

。稍后在代码中，我使用了标签：

<main>
<h1>A la une</h1>
<div className="card-columns">
<DisplayUnes />
</div>
</main>

我已经尝试了其他方法，例如调用函数，存储生成的html并将其显示在"卡片列"块中。似乎问题来自循环。当我在浏览器上检查渲染的代码时，不会为 中的元素生成 jsx id

您对如何解决此问题有任何想法吗？ 我多次验证了所有必要的依赖项都已安装(使用 nextjs、react-bootstrap)，但如果有人能够为我提供它们的回顾，它可能仍然有用。

提前感谢您的时间， 有好的一天 本杰明

Answer 1

使用这个let i = 0而不是这个var i=0; 和

for (const [index, value] of idUnes.entries()) {
items.push(
<div className="card" key={index}>
<div className="card-body">
<h5 className="card-title">{titleUnes[index]}</h5>
<p className="card-text">{bodyUnes[index]}</p>
<a>{dateUnes[index]}</a>
<a href="#" className="btn btn-primary">Go somewhere</a>
</div>
</div>

) }

和

将const items = []更改为let items = []。