如何对对象数组映射过滤以展示符合功率要求的产品？

核心问题 #

• 遍历限制：硬编码filteredPerson.pompy[0].cena仅能获取单公司下第一个产品数据，无法遍历展示所有符合条件的产品
• 过滤逻辑错误：原filter中的for循环在第一次匹配判断时就直接return，导致无法完整遍历所有pompy元素验证功率匹配，过滤结果不准确

修复方案 #

1. 重构功率匹配逻辑，消除冗余判断 #

把大量硬编码的if判断替换为动态计算允许的功率范围：

• 计算目标功率targetKw = Math.ceil(calkowitezapotrzebowanie / 1000)
• 定义允许的功率区间：对于目标功率N，允许N、N-1、N-2三个档位（2-4.5区间单独处理）
• 提取通用函数isPowerMatch(targetKw, cena)统一判断产品是否符合功率要求

2. 修正过滤逻辑 #

使用数组some方法替代for循环，检查公司下是否存在至少一个符合条件的产品，避免提前return导致的遍历中断

3. 遍历所有pompy元素渲染 #

在渲染阶段，对filteredPerson.pompy进行map遍历，处理每个产品的功率过滤与展示，不再局限于索引0的元素

优化后代码 #

{/* 计算目标功率，只计算一次避免重复运算 */}
{(() => {
  const targetKw = Math.ceil(calkowitezapotrzebowanie / 1000);
  
  // 通用功率匹配判断函数
  const isPowerMatch = (cena) => {
    const cenaKeys = Object.keys(cena);
    if (targetKw >= 2 && targetKw <= 4.5) {
      return cenaKeys.some(key => ["1kw", "2kw", "3kw"].includes(key));
    }
    // 其他情况匹配当前kw及前两个档位
    const allowedKws = [
      `${targetKw}kw`,
      `${targetKw - 1}kw`,
      `${targetKw - 2}kw`
    ];
    return cenaKeys.some(key => allowedKws.includes(key));
  };

  return ofertapompy
    .filter(person => {
      // 检查该公司是否有至少一个符合条件的产品
      return person.pompy.some(pump => isPowerMatch(pump.cena));
    })
    .map((filteredPerson, companyIndex) => (
      <>
        <tr style={{ width: "100%", backgroundColor: "#ae4a84" }}>
          {filteredPerson.nazwa_firmy}
        </tr>
        <tr>公司序号：{companyIndex + 1}</tr>
        {/* 遍历当前公司所有符合条件的产品 */}
        {filteredPerson.pompy
          .filter(pump => isPowerMatch(pump.cena))
          .map((pump, pumpIndex) => (
            <tr key={pump.id}>
              <td>产品名称：{pump.name}</td>
              <td>保修：{pump.gwarancja || "无数据"}</td>
              <Table
                className={style.effectivetable}
                style={{ borderColor: "transparent" }}
                responsive
                striped
                hover
              >
                <thead>
                  <tr>
                    <th>功率</th>
                    <th>净价（zł）</th>
                    <th>补贴后价格</th>
                  </tr>
                </thead>
                <tbody>
                  {/* 过滤当前产品符合要求的功率档位 */}
                  {Object.entries(pump.cena)
                    .filter(([key]) => {
                      if (targetKw >= 2 && targetKw <= 4.5) {
                        return ["1kw", "2kw", "3kw"].includes(key);
                      }
                      const allowedKws = [
                        `${targetKw}kw`,
                        `${targetKw - 1}kw`,
                        `${targetKw - 2}kw`
                      ];
                      return allowedKws.includes(key);
                    })
                    .map(([key, value], priceIndex) => (
                      <tr key={priceIndex}>
                        <td>{key}</td>
                        <td>{(value * 1.1).toFixed(1)} zł netto</td>
                        <td>
                          {cenaPoDotacjiIuldze(
                            value * 1.1,
                            wysokoscDotacji,
                            stawkaPodatkuDochodowego
                          ).toFixed(1)}
                        </td>
                      </tr>
                    ))}
                </tbody>
              </Table>
            </tr>
          ))}
      </>
    ));
})()}

关键修改点说明 #

• 提取通用函数isPowerMatch，统一功率匹配逻辑，避免代码重复
• 使用some方法替代原for循环，确保完整遍历所有产品后再返回过滤结果
• 渲染时先过滤公司内符合条件的产品，再逐个遍历渲染，不再硬编码索引0
• 提前计算targetKw，避免在多次循环中重复运算，提升性能

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