React中使用Map渲染购物车商品列表问题求助

你只需修改App.js中的商品列表渲染部分，通过map方法遍历products数组动态生成所有商品项，同时借助PersianDigits格式化价格。以下是修改后的完整代码：

import "./App.css";
import { products } from "./data";
import { PersianDigits } from "./utils";

function App() {
  return (
    <div className="d-flex justify-content-center align-items-center vh-100">
      <div className="container">
        <div className="row">
          <div className="col">
            <h3 className="text-center mb-5">سبد خرید</h3>
          </div>
        </div>
        <div className="row">
          <div className="col">
            <div className="list-group">
              {/* 遍历商品数组生成所有商品项 */}
              {products.map(product => (
                <div key={product.id} className="list-group-item">
                  <div className="d-flex align-items-center justify-content-between">
                    <img
                      src={product.image}
                      alt={product.name}
                      className="product-image"
                    />
                    <span>{product.name}</span>
                    <span>{PersianDigits(product.price)}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

关键修改说明： #

• 用products.map(product => ...)遍历商品数组，为每个商品生成对应的列表项
• 给每个动态生成的列表项添加key={product.id}，满足React列表渲染的性能优化要求
• 将静态的图片地址、商品名称、价格替换为数组元素的对应属性：product.image、product.name、product.price
• 通过PersianDigits(product.price)将商品价格格式化为波斯数字的里亚尔显示格式

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