嵌套map函数返回undefined数组，无法生成JSX表格行问题

核心问题分析 #

你遇到的问题根源有两个：

1. 外层map的回调函数没有返回内层处理的结果，导致每个迭代项默认返回undefined，最终数组全是undefined。
2. 内层map没有先过滤不符合条件的燃油泵，导致不符合条件的项会返回undefined，即使外层正确返回，数组里也会混有无效元素。

修复方案 #

方法1：使用flatMap简化嵌套处理（推荐） #

flatMap可以同时完成映射和扁平化数组的操作，直接生成一维的JSX元素数组：

const finalList = result_petrol_data.result.slice(0, maxResult)
  .flatMap(dealer => {
    // 先筛选符合条件的燃油泵
    return dealer.fuels
      .filter(fuel => 
        fuel.fuel_type_selected === fuel_type_selected && 
        fuel.is_fuelpump_selfservice
      )
      // 再将符合条件的燃油泵转为<tr>元素
      .map(fuel => (
        <tr key={`${dealer.id}-${fuel.id}`}>
          {/* 替换成你的表格内容 */}
          <td>{dealer.name}</td>
          <td>{fuel.price}</td>
          <td>{fuel.is_fuelpump_selfservice ? "自助" : "人工"}</td>
        </tr>
      ));
  });

方法2：map + flat组合 #

如果环境不支持flatMap（比如旧版React项目），可以用map生成二维数组后再扁平化：

const finalList = result_petrol_data.result.slice(0, maxResult)
  .map(dealer => {
    return dealer.fuels
      .filter(fuel => 
        fuel.fuel_type_selected === fuel_type_selected && 
        fuel.is_fuelpump_selfservice
      )
      .map(fuel => (
        <tr key={`${dealer.id}-${fuel.id}`}>
          {/* 表格内容 */}
        </tr>
      ));
  })
  .flat(); // 将二维数组转为一维

关键注意事项 #

• 必须返回结果：外层map/flatMap的回调函数一定要return内层处理后的数组，否则会得到undefined。
• 过滤优先于映射：先用filter筛掉不符合条件的燃油泵，再用map生成JSX，避免数组中混入undefined。
• 设置唯一Key：给每个<tr>设置唯一的key（比如经销商ID+燃油泵ID的组合），避免React渲染警告。

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