Question

我在reactjs上遇到问题。

问题是我的组件在获取数据之前已渲染，因此使某些类失去了样式。但是如果我在检查页面时重新加载页面（Chrome检查元素），它将正确加载。

无需检查

请帮助我。如果我对其进行硬编码（不使用.map），则效果很好。

代码（我认为它没有帮助）

 var produk = products.slice(0,4).map(products =>
          <div className="col-lg-3 col-md-6 special-grid best-seller">
          <div className="products-single fix">
              <div className="box-img-hover">
                  <div className="type-lb">
                      <p className="sale">{products.tipe}</p>
                  </div>
                  <div className="imageboks" style={{height:"18vh", width:"28vh"}}>
                  <img src={'images/esport/'+products.gambar1} className="img-fluid" alt="Image" />
                  </div>
                  <div className="mask-icon">
                      <ul>
                          <li><a href="#" data-toggle="tooltip" data-placement="right" title="View"><i className="fas fa-eye"></i></a></li>
                          <li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i className="fas fa-sync-alt"></i></a></li>
                          <li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i className="far fa-heart"></i></a></li>
                      </ul>
                      <a className="cart" href="#"> {new Intl.DateTimeFormat("id", {
          year: "numeric",
          month: "long",
          day: "2-digit"
        }).format(products.firstSale)}</a>
                  </div>
              </div>
              <div className="why-text">
                  <h4>{products.judul}</h4>
                  {products.harga === 0 ? <h5>Gratis</h5> : <h5><NumberFormat value={products.harga} displayType={'text'} thousandSeparator={true} prefix={'Rp. '}/></h5>}
              </div>
          </div>
      </div>

返回码

  <div className="row special-list">
                {produk}


              </div>

提取数据时reactjs视图陷入混乱

0 个答案: