如何在反应 js 中 map 来自 JSON 文件中的数组的数据？

Question

这就是我想要呈现的：

如何从这个 JSON 数据中 map 的“源”数组并显示多行？

{
    "_id": 1,
    "name": "Name",
    "brand": "Brand",
    "image": "/images/image.jpg",
    "sources": [
        {
            "retailer": 1,
            "price": "0.00",
            "retailer_name": "Onbuy",
            "retailer_image": null
        },
        {
            "retailer": 12,
            "price": "0.00",
            "retailer_name": "Curry PC World",
            "retailer_image": "/images/currys1.jpg"
        },
        {
            "retailer": 2,
            "price": "0.00",
            "retailer_name": "AWD-IT",
            "retailer_image": null
        },
        {
            "retailer": 3,
            "price": "0.00",
            "retailer_name": "Scan",
            "retailer_image": null
        }
    ]
}

这是我连续显示每个数据源的代码：

function ProductPage({match,history}) {

    const dispatch = useDispatch()
    const productDetails = useSelector(state => state.productDetails)
    const {error, loading, product} = productDetails
  
    return (<>
            
            {loading ? <h2 className="center-title"><Spinner animation="border" variant="success"/> Loading...</h2>: error ? <h3 className="center-title">{error}</h3> :
                
                <Row className="move-down">
                    <Col md={3}>
                        <ListGroup>
                            <ListGroup.Item ><h3>{product.name}</h3></ListGroup.Item>
                            {/* I Want to map here */}
                            <ListGroup.Item className="d-flex justify-content-between align-items-center ">
                                <Image src={IMAGE GOES HERE}/>
                                <h5 className="text-center">{PRICE GOES HERE}</h5> 
                                <Button variant="success">View</Button>
                            </ListGroup.Item>
                            {/* ------------------------------------------------------------------------- */}
                        </ListGroup>     
            }
                
        </>
    )
}

export default ProductPage

我也在使用 redux 将有效负载发送到这个组件

谢谢

编辑问题已修复：我也忘记将源添加到 state state={product:{sources:[]}}

Answer 1

您可以像这样使用map

{product.sources.map((item, index) => (
 <ListGroup.Item key={index} className="d-flex justify-content-between align-items-center ">
   <Image src={item.retailer_image}/>
   <h5 className="text-center">{item.price}</h5> 
   <Button variant="success">View</Button>
 </ListGroup.Item>
))}