如何循环使用React中的地图功能？

问题描述：

我目前正在通过render方法返回每个对象的列表元素的产品数组，我想为可用的产品数量创建一个html选择标签。只有这样，我才能想到这样做是通过为每个数量循环一个选项，但在map函数中使用它时似乎会引发语法错误。如何循环使用React中的地图功能？

我似乎无法找到任何关于此问题的问题，map函数内部的整个循环已经返回jsx。

render() { 
    const products = this.props.products.map((product, id) => 

      <li key={id} className='products-list-container' > 

       <div className='product-inner-div-wrapper'> 

        <div className='product-title-container'> 
         <p>{product.name}</p> 
        </div> 

        <div className='product-price-container'> 
         <p>{product.price.formatted_with_code}</p> 
        </div> 

        // THIS IS WHERE I TRY TO LOOP AND CREATE AN OPTION 
        // FOR EVERY QUANTITY 
        <select> 
         { 
          for (var i = 0; i < products.quantity; i++) { 
         return <option value={i}>{i}</option> 
          } 
         } 
        </select> 


        <div className='product-add-item-container'> 
        { product.is.sold_out ? <p>SOLD OUT</p> : 
         <p onClick={() => this.addItem(product.id)}>add to cart</p> 
        } 
        </div> 

        <div className='products-image-container'> 
         <img src={product.media.source} /> 
        </div> 


       </div> 

      </li> 
     ); 
    return(
      <div className='products-list-container'> 
       <ul className='products-list-ul'> 
        {products} 
       </ul> 
      </div> 
     ) 
}

[React JSX内部循环可能重复]（https://stackoverflow.com/questions/22876978/loop-inside-react-jsx） –

你可以用products.quantity做另一个映射，并使用var内部的var地图。 –

@MayankShukla看不到？我的代码在返回之外显示一个map函数，它已经返回一个jsx元素。那么我如何循环内部的map函数中的jsx元素？大括号似乎并不被在此方案中 –

答

而是创建一个循环，你可以在这里使用的地图，以及，一些阵列诡计：

{new Array(product.quantity).fill().map((_, i) => <option>{i}</option>)}

这不是很漂亮 - 但你可以拉了这一点到其自身的功能，并描述性地命名它。

谢谢，这不是很好，但它确实解决了问题，除了它的product.quantity，而不是产品。但谢谢！ –

抱歉，错字。是的，这是丑陋的af，但它不必经过一些重构=） –

因此，因为这是显示一个产品的数量，你给我的代码开始从0的一切，所以我怎么得到这个循环设置从1到上的所有内容，而不添加到i变量中。 –

如何循环使用React中的地图功能？

相关推荐