Итерация в нескольких состояниях при рендеринге - PullRequest
Новая
       6

Итерация в нескольких состояниях при рендеринге

0 голосов
/ 12 ноября 2018

Я пытаюсь отобразить компонент, который получает данные из локального 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

UPDATE:

Это вывод, который я ищу (один раз за цикл, не все из них в одном массиве):

<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>
    )
  }
}

1 Ответ

0 голосов
/ 12 ноября 2018

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}

...

]

...