Question

我正在尝试渲染一个组件，该组件从本地API接收数据，并且已将其设置为多种状态，目前我正在映射一个状态，而我需要使用另一状态的一些数据。如何访问这些数据并映射一次？

在prodsLink={'https://www.sodimac.cl/sodimac-homy/product/' + skuData.productId + '/'}

我需要渲染如下内容：

https://www.sodimac.cl/sodimac-homy/product/productID/productLocation

但如果我这样做：

prodsLink={'https://www.sodimac.cl/sodimac-homy/product/' + skuData.productId + '/' + this.state.ids.map(skuMarca => skuMarca.marca)}

它将呈现如下内容：

https://www.sodimac.cl/sodimac-homy/product/productID/productLocation01,productLocation02,productLocation03,productLocation04

更新：

这是我要查找的输出（每个循环一次，不是所有数组都在一个数组中）：

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation01"> BUTTON 01 </a>

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation02"> BUTTON 02 </a>

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation03"> BUTTON 03 </a>

<a href="https://www.sodimac.cl/sodimac-homy/product/productID/productLocation04"> BUTTON 04 </a>

我知道这很令人困惑，所以这是我的代码。

render() {

    return (
      this.getWebServiceResponse(this.state.ids.map(e => e.sku).join('-'), 96),
      this.state.active == true &&
      <div className="row" style={{ width: '89%', margin: '0 auto' }}>
        <div className="blockCatPriceSlide">
          {this.state.products.map(skuData =>
              window.innerWidth > 440 && skuData.status === 'OK' ?
                <ContenidoUno
                  prodsName={skuData.name.substr(0, 30) + '...'}
                  prodsId={skuData.productId}
                  prodsStatus={skuData.status}
                  prodsPublished={skuData.published}
                  prodsNormal={skuData.NORMAL.toLocaleString().replace(',', '.')}
                  prodsCMR={skuData.CMR}
                  prodsCombo={skuData.combo}
                  prodsAhorro={skuData.savings}
                  prodsStock={skuData.stockLevel}
                  prodsAntes={skuData.NORMAL + skuData.savings > skuData.NORMAL ? <small> Antes: $ {skuData.NORMAL + skuData.savings} </small> : ''.toLocaleString().replace(',', '.')}
                  prodsLink={'https://www.sodimac.cl/sodimac-homy/product/' + skuData.productId + '/'}
                  prodsImg={'https://picsum.photos/g/570/250'}
                  prodsIcon={(skuData.combo === true &&
                    <img src='https://via.placeholder.com/100x50/f41435/ffffff?text=combo' className="iconic" alt="producto" />) ||
                    (skuData.CMR !== undefined && <img src='https://via.placeholder.com/100x50/f41435/ffffff?text=CMR' className="iconic" alt="producto" />)}
                  catName={skuData.webCategoryName}
                /> :
                <ContenidoUno
                  prodsName={'Producto sin información...'}
                  prodsId=''
                  prodsStatus=''
                  prodsPublished=''
                  prodsNormal=''
                  prodsCMR=''
                  prodsCombo=''
                  prodsAhorro=''
                  prodsStock=''
                  prodsAntes=''
                  prodsLink=''
                  prodsImg={'https://picsum.photos/g/570/250'}
                  prodsIcon=''
                  catName=''
                />

            )
          }
        </div>
      </div>
    )
  }
}

Answer 1

Array.prototype.map返回一个新数组，因此在这种情况下，您只是返回 [marca ?, marca ?, ...] 的数组，所以不返回 > marca？，您应该从地图中返回整个链接，如下所示：

prodsLink={ this.state.ids.map(({ marca }) =>
  `https://www.sodimac.cl/sodimac-homy/product/${skuData.productId}/${marca}`
)}

这将生成链接数组：

[

https://www.sodimac.cl/sodimac-homy/product/${skuData.productId}/${marca}， https://www.sodimac.cl/sodimac-homy/product/${skuData.productId}/${marca}， https://www.sodimac.cl/sodimac-homy/product/${skuData.productId}/${marca}，

...

]

渲染时以多种状态进行迭代

1 个答案: