如何使用useState Hook展示数组对象并实现行列布局

我原本会拆分两个组件，一个用来存储数组数据，另一个负责读取并展示。现在想简化成单个组件，用useState存储数组，直接在render函数里把数组元素以行列形式展示。目前的代码如下：

import React,{useState} from 'react';
import Card from 'react-bootstrap/Card';
import{Col,Row,Container} from 'react-bootstrap';

function Product() {
    const [product, setProduct] = useState([
        {img:'pexels-charles-kettor-1005162.jpg' , price:'500$', id: 1},
        {img:'pexels-mike-b-1104768.jpg', price:'320$', id:2},
        {img:"pexels-zsolt-joo-2882234.jpg", price:"555$", id:3},
        {img:"pexels-pixabay-326259.jpg", price:"365$", id:4},
        {img:"pexels-pixabay-164634.jpg", price:"545$", id:5},
        {img:"pexels-trace-constant-707046.jpg", price:"200$", id:6},
        {img:"pexels-mike-b-116675.jpg", price:"988$", id:7},
        {img:"pexels-mike-b-170811.jpg", price:"100$", id:8},
    ])
  return (
    <div>
        <Container>
            <Row>
              {product.map()}          
            </Row>
        </Container>
    </div>
  )
}

export default Product

解决方案 #

你只需要完善product.map()的逻辑，结合React Bootstrap的Col组件实现行列布局即可。每个产品项渲染为一个Col，内部嵌套Card组件展示图片和价格，同时给map返回的每个元素指定唯一key（用数组对象的id）。修改后的完整代码如下：

import React,{useState} from 'react';
import Card from 'react-bootstrap/Card';
import{Col,Row,Container} from 'react-bootstrap';

function Product() {
    const [product, setProduct] = useState([
        {img:'pexels-charles-kettor-1005162.jpg' , price:'500$', id: 1},
        {img:'pexels-mike-b-1104768.jpg', price:'320$', id:2},
        {img:"pexels-zsolt-joo-2882234.jpg", price:"555$", id:3},
        {img:"pexels-pixabay-326259.jpg", price:"365$", id:4},
        {img:"pexels-pixabay-164634.jpg", price:"545$", id:5},
        {img:"pexels-trace-constant-707046.jpg", price:"200$", id:6},
        {img:"pexels-mike-b-116675.jpg", price:"988$", id:7},
        {img:"pexels-mike-b-170811.jpg", price:"100$", id:8},
    ])
  return (
    <div>
        <Container>
            <Row>
              {product.map(item => (
                <Col key={item.id} xs={12} sm={6} md={3} className="mb-4">
                  <Card>
                    <Card.Img variant="top" src={item.img} alt={`产品 ${item.id}`} />
                    <Card.Body>
                      <Card.Text>{item.price}</Card.Text>
                    </Card.Body>
                  </Card>
                </Col>
              ))}          
            </Row>
        </Container>
    </div>
  )
}

export default Product

关键说明 #

• 用Col的xs/sm/md属性实现响应式布局：移动端每行1个，平板每行2个，桌面端每行4个
• className="mb-4"给每个卡片添加底部间距，避免布局拥挤
• 给Card.Img添加alt属性，提升页面可访问性
• 必须给map返回的元素指定唯一key，这里用数组对象的id，避免React渲染警告

内容的提问来源于stack exchange，提问作者John