React/Next.js中filter筛选后map渲染结果与预期不符问题排查

• 核心问题是索引对应的数组错配：你对doctors.results执行filter和sort操作后，会返回一个全新的数组，这个新数组的索引和原始doctors.results的索引没有关联。你用新数组的索引去原始数组中取条目，自然会拿到不符合筛选条件的数据。
• 多余操作增加出错概率：数组本身可以直接调用map遍历，不需要先用Object.keys提取索引列表再遍历，这一步多余操作直接导致了索引错配的问题。

建议先把筛选排序后的结果单独存为一个变量，再直接遍历这个变量渲染，代码更易读也不会出错：

// 先处理得到符合要求的医生列表
const filteredMaleDoctors = doctors.results
  .filter(r => r.gender === 'Male')
  .sort((a, b) => a.locations[0].distance - b.locations[0].distance);

// 渲染时直接遍历处理后的数组
{filteredMaleDoctors.map((doctor, index) => (
  // 若医生数据有唯一标识（比如专属id），建议替换key为唯一标识，性能更好
  <div key={index}>
    {doctor.fullName} - {doctor.gender}
  </div>
))}

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