reactjs - react js中的动态循环扰乱了设计

Question

我正在从 api 获取数据并将其呈现到我的组件中，如下所示

 {this.auth.adminList.map(item => (
            <div className="item">
              <div className="pad15">
                <p className="lead">Multi Item Carousel</p>
                <p>₹ 1</p>
                <p>₹ 6000</p>
                <p>50% off</p>
              </div>
            </div>
          ))}

它像这样在html中呈现

但是如果我在我们的数组中给出硬编码数据，比如

var adminList = [
  {
    id: 1,
    title: "tu jane na",
    image: "http://localhost:5000/images/image-1594017160096.jpg",
    description: "admin",
    views: 0,
    playlistOwner: 2,
    added_at: "2020-07-07T06:22:00.000Z"
  },
  {
    id: 2,
    title: "adat",
    image: "http://localhost:5000/images/image-1594017160096.jpg",
    description: "admin",
    views: 0,
    playlistOwner: 2,
    added_at: "2020-07-07T06:22:10.000Z"
  }
];

然后我的 html 设计准确地加载了我想要的

标签： reactjs