Javascript 如何在React中循环map函数？

我目前正在通过render方法中的产品数组进行映射，返回每个对象的列表元素，我想为可用产品的数量创建一个html选择标记。我能想到的唯一方法是为每个数量循环出一个选项，但在map函数中使用它时，这似乎会抛出一个语法错误

我似乎找不到任何与此相关的问题，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>
        )
}

render（）{
const products=this.props.products.map（（产品，id）=>

{product.name}

{product.price.formatted_with_code}

//这就是我尝试循环并创建选项的地方
//每一个数量
{
对于（变量i=0；i：
this.addItem（product.id）}>添加到购物车
}

);
返回(

{产品}

)
}

除了创建循环，您还可以在此处使用贴图，并使用一些数组技巧：

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

{new Array（product.quantity）.fill（）.map（（{u，i）=>{i}}

---

它不是很漂亮-但是你可以把它拉到它自己的函数中，并用描述性的方式命名它。

你可能的重复可以用products.quantity做另一个映射，并使用该映射中的var。@MayankShukla不知道怎么做？我的代码在return之外显示了一个map函数，它已经返回了一个jsx元素。那么，如何在映射函数内部的jsx元素内部循环呢？在这种情况下，花括号似乎根本不起作用scenario@KarlTaylor我试过这个产品。数量（（数量，id）=>返回{id}）。。。但因为products.quantity是一个数字，所以它只返回0@john-raymon的问题是，我们不能直接在JSX中使用for循环，因为循环不返回任何东西，请为该循环中的put for循环编写一个单独的函数，并调用该函数，它将返回所需的结果。谢谢，这并不漂亮，但它确实解决了问题，除了它的产品。数量，而不是产品。但是谢谢！！对不起，我打错了。是的，它是丑陋的af，但它不必经过一些重构=）因此，既然这是为了显示一个产品的数量，您给我的代码从0开始，那么我如何让这个循环从1开始设置所有内容，而不只是添加I变量。