Question

我目前在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>
        )
}

Answer 1

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

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

它不是很漂亮 - 但是你可以把它拉到自己的功能中，并用它来描述它。

如何在React中循环地图函数？

1 个答案: