React应用中按选定币种过滤展示产品价格问题求助

在React应用渲染产品列表时，需要根据用户选定的币种（已维护在state中），从产品的多币种价格数组里筛选出对应价格，以「币种符号+金额」的格式展示。但现有filter+map的写法无法正常显示价格，请求排查并给出正确实现。

数据结构示例 #

"data": {
    "category": {
      "products": [
        {
          "id": "1",
          "name": "Nike Air Huarache Le",
          "gallery": [
            "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_2_720x.jpg?v=1612816087",
            "https://cdn.shopify.com/s/files/1/0087/6193/3920/products/DD1381200_DEOA_1_720x.jpg?v=1612816087"
          ],
          "prices": [
            {
              "currency": {
                "label": "USD",
                "symbol": "$"
              },
              "amount": 144.69
            },
            ...
          ]
        },
      ]
    }
}

无效代码示例 #

<p>{prices.filter((item) => {
       return item.currency.label.includes('USD').label}).map((el)=>el)} 
</p>

1. 语法错误：item.currency.label.includes('USD')返回布尔值，后续.label属于访问布尔值的不存在属性，直接触发报错，导致代码无法执行。
2. 渲染逻辑错误：filter返回数组后直接map整个对象，React无法直接渲染对象类型，会显示[object Object]或抛出错误。
3. 未联动用户选择：硬编码'USD'，没有使用用户选定的币种state，不符合需求。

假设用户选定的币种存储在stateselectedCurrency中（格式与数据里的currency.label一致，如'USD'），以下是两种可行方案：

方案1：用find匹配唯一价格（推荐） #

业务上每个币种对应唯一价格，用find直接获取匹配项，比filter更高效：

// 假设当前遍历的产品为product
const matchedPrice = product.prices.find(price => price.currency.label === selectedCurrency);

// 渲染价格
<p>{matchedPrice ? `${matchedPrice.currency.symbol}${matchedPrice.amount}` : '暂无对应币种价格'}</p>

方案2：filter+map处理多匹配项（特殊场景） #

如果存在同币种多个价格的特殊情况，用filter筛选后逐个渲染：

// 渲染价格
<p>
  {product.prices
    .filter(price => price.currency.label === selectedCurrency)
    .map((price, idx) => (
      <span key={idx}>{price.currency.symbol}{price.amount} </span>
    ))}
</p>

关键注意事项 #

• 空值校验：必须判断匹配结果是否存在，避免找不到价格时触发报错。
• 联动state：直接使用selectedCurrency，不要硬编码币种值，保证和用户选择同步。
• key属性：使用map渲染列表时，必须给每个元素添加唯一key（如示例中的idx，或价格的唯一标识字段）。

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