如何多次渲染一个元素答案

【问题标题】：How to render an element several times如何多次渲染一个元素
【发布时间】：2021-10-21 13:48:37
【问题描述】：

我有一个我必须渲染的项目列表（js 对象）。列表如下：https://imgur.com/a/lEgfMHd

category: {id: 1, name: "Mac"}
created_at: "2021-08-13T21:07:03.619726Z"
id: 4
name: "iMac 24”"
preview_image: "/media/images/f1cb8efe-13e1-482e-97ca-30ffdf88e3c0.png"
price: 1699
sales: 0
updated_at: "2021-08-13T21:10:07.247422Z"

我需要渲染所有这些元素，但我不知道该怎么做。现在，如果我只知道他的索引，我就可以渲染一个元素

render() {

        const {items} = this.state

        const countItems = Object.keys(items).length

        const secEl = items[1]
        let url = ''
        if(secEl && secEl.preview_image) {
            url = '*******'
            url = url + secEl.preview_image
        }

        return(
            <div className='store-items'>
                <div className='store-item'>
                    <img className='store-item__img' src={url}></img>
                    <h3 className='store-item__title'>{secEl && secEl.name}</h3>
                    <h3 className='store-item_price'>${secEl && secEl.price}</h3>
                </div>
            </div>
        )
    }

我知道如何获取列表中的项目数量，但我不知道如何使用不同的名称、价格和 img 渲染多次相同的元素。

请帮帮我，我是 React 新手

【问题讨论】：

你知道如何通过数组map吗？谷歌展示了很多关于这方面的文章。这是一个：linguinecode.com/post/how-to-use-map-react

标签： javascript reactjs object fetch render

【解决方案1】：

创建一个 JSX 元素数组。

items.map((item, index) => {
    let url = url = secEl.preview_image
    return (
        <div id={index} className='store-item'>
            <img className='store-item__img' src={url}></img>
            <h3 className='store-item__title'>{item.name}</h3>
            <h3 className='store-item_price'>${item.price}</h3>
        </div>
    )
}

return(
    <div className='store-items'>
        { items }            
    </div>
)

【讨论】：