如何在 React 中循环映射函数？答案

【问题标题】：How can I loop in a map function in React?如何在 React 中循环映射函数？
【发布时间】：2018-01-18 11:58:59
【问题描述】：

我目前正在通过渲染方法中的产品数组进行映射，为每个对象返回列表元素，我想为可用产品的数量创建一个 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>
        )
}

【问题讨论】：

loop inside React JSX的可能重复
您可以使用 products.quantity 制作另一个地图，并在该地图中使用 var。
@MayankShukla 不明白怎么做？我的代码在 return 之外显示了一个 map 函数，它已经返回了一个 jsx 元素。那么如何在地图函数内部的 jsx 元素内循环呢？在这种情况下，大括号似乎根本不起作用
@KarlTaylor 我试过这个 products.quantity((quantity, id) => return ); ...但由于 products.quantity 是一个数字，它只返回 0
@john-raymon 问题是我们不能直接在 JSX 中使用 for 循环，for 循环不返回任何内容，为里面的 for 循环编写一个单独的函数并调用该函数，它将返回所需的结果。

标签： javascript reactjs loops for-loop return

【解决方案1】：

您也可以在这里使用地图，而不是创建循环，并使用一些数组技巧：

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

它不是很漂亮 - 但你可以将它提取到它自己的函数中，并描述性地命名它。

【讨论】：

谢谢，这不是很漂亮，但它确实解决了问题，除了它的 product.quantity，而不是 products。不过谢谢！！
抱歉错字。是的，它很丑，但不一定要经过一些重构 =)
所以因为这是显示产品的数量，所以你给我的代码从 0 开始，所以我如何让这个循环设置从 1 开始的所有内容而不只是添加到 i变量。