从功能显示卡片组件的问题 [React-Bootstrap]答案

【问题标题】：Troubles with displaying cards components from function [React-Bootstrap]从功能显示卡片组件的问题 [React-Bootstrap]
【发布时间】：2021-01-05 10:40:02
【问题描述】：

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

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 并将其显示在“card-columns”块中。似乎问题出在循环中。当我在浏览器上检查呈现的代码时，没有为中的元素生成 jsx id

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

提前感谢您的时间，祝你今天过得愉快，本杰明

【问题讨论】：

如果我们将值推入其中，为什么items = [] 被声明为const。

标签： reactjs react-bootstrap web-development-server

【解决方案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 = []。

【讨论】：