如何多次渲染一个元素

Question

我有一个必须渲染的项目列表（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 的新手

Answer 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>
)

如何多次渲染一个元素

How to render an element several times

javascript

render

object

fetch

reactjs