React中如何使用map遍历JSON对象并展示指定数据？

问题描述 #

我有一个JSON格式的商品数据对象，想在React页面中展示，但使用map函数遍历时遇到了问题。需要获取JSON中的page、total_results、page_size等分页信息，以及item数组内的title、pic_url、price等商品数据，请问该如何实现数据的访问与展示？

提供的数据 #

const product = {
  "items": {
    "page": "1",
    "real_total_results": 500,
    "total_results": 500,
    "page_size": 10,
    "pagecount": 50,
    "item": [
      {
        "title": "2022 Martin Men's Shoes Pigskin Autumn",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01iURzli2Ka1udcUHnM_!!2212881679572-0-cib.jpg",
        "promotion_price": "83.00",
        "price": "83.00",
        "sales": 223,
        "turnover": "1万+"
      },
      {
        "title": "Single shoe summer",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01eMAlUd1GfHlfmUnE1_!!2211426400649-0-cib.jpg",
        "promotion_price": "5.30",
        "price": "5.30",
        "sales": 381884,
        "turnover": "27万+"
      },
      {
        "title": "Men's shoes and women's shoes Beijing",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01pshk1P27HAb7t9H5i_!!2208535077771-0-cib.jpg",
        "promotion_price": "5.00",
        "price": "5.00",
        "sales": 94815,
        "turnover": "7万+"
      },
      {
        "title": "2022 Running Shoes Sneakers",
        "pic_url": "https://cbu01.alicdn.com/img/ibank/O1CN01KNh1N31Dwk4VGdCWB_!!2863830281-0-cib.jpg",
        "promotion_price": "82.00",
        "price": "82.00",
        "sales": 16573,
        "turnover": "4万+"
      }
    ]
  }
}

现有错误代码 #

<div className="row items">
            {product.items.map((values) => {
              return(   
                <div className="col-lg-3 col-md-4 col-sm-6 col-6" >
                  <span>Total: {values.total_results}</span>
                    values.item.map((val) =>{
                      return(
                        <div className="productImage">
                         <img style={{height:'100%', width: '100%'}}src={val.pic_url} alt="" />
                        </div>
                         <Link to='/' style={{textDecoration:'none', color:"#1a1a1a"}}>
                           <div className="cardDetail">
                            <div >
                              <p>{val.title}</p> 
                            </div>
                            <div>
                             <h6>¥ {val.price}</h6>
                           </div>
                           <div>
                             <h6>¥ {val.sales}</h6>
                           </div>
                       </div>
                  </Link>
                       )
                  })
                </div>
              )
            })}
          </div>

问题分析 #

原代码存在3个核心错误：

1. product.items是对象而非数组，不能直接调用map方法
2. 内层values.item.map未用{}包裹，JSX中嵌入JavaScript逻辑必须放在大括号内
3. 销量sales被错误添加了¥符号，属于展示逻辑错误

修正后的完整代码 #

import { Link } from 'react-router-dom';

const ProductList = () => {
  // 提取分页信息和商品列表，用解构赋值简化代码
  const { page, total_results, page_size, item: productList } = product.items;

  return (
    <div>
      {/* 展示分页信息 */}
      <div className="pagination-bar">
        <span>当前页：{page}</span>
        <span>总商品数：{total_results}</span>
        <span>每页条数：{page_size}</span>
      </div>

      {/* 商品列表展示 */}
      <div className="row items">
        {productList.map((item, index) => (
          // 必须添加唯一key属性，建议用商品ID，这里临时用索引
          <div key={index} className="col-lg-3 col-md-4 col-sm-6 col-6">
            <div className="productImage">
              <img 
                style={{ height: '100%', width: '100%' }} 
                src={item.pic_url} 
                alt={item.title} // 补充alt文本，提升可访问性
              />
            </div>
            <Link to='/' style={{ textDecoration: 'none', color: "#1a1a1a" }}>
              <div className="cardDetail">
                <div>
                  <p>{item.title}</p>
                </div>
                <div>
                  <h6>¥ {item.price}</h6>
                </div>
                <div>
                  <h6>销量：{item.sales}</h6>
                </div>
              </div>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ProductList;

关键说明 #

• 分页信息访问：直接通过product.items对象获取，比如product.items.total_results，用解构赋值可以让代码更简洁
• 商品列表遍历：真正的商品数组是product.items.item，仅对这个数组调用map方法
• JSX语法规则：所有JavaScript逻辑（如遍历、条件判断）必须放在{}中
• 列表项key属性：React要求列表元素必须有唯一key，避免渲染警告，实际项目推荐使用商品唯一ID而非索引
• 展示细节优化：销量sales是数字，不要添加货币符号；补充图片alt文本提升页面可访问性

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