ReactJS中筛选最低层级元素：filter返回结果异常

看起来你是想从元素数组里挑出属于**最低层级（也就是Y坐标最小的那一组）**的所有元素对吧？之前用filter没得到预期结果，大概率是因为没先确定全局的最小Y值，而是在filter回调里做了局部比较，这样很容易出错。

给你个简单靠谱的思路：先找出所有元素里最小的Y坐标值，再筛选出所有Y等于这个最小值的元素就行，步骤很清晰：

1. 确定全局最小Y值 #

先把所有元素的Y坐标提取出来，用Math.min拿到最小值，这里要注意如果你的Y是字符串类型，记得先转成数字：

// 假设每个step对象有y属性表示层级坐标
const minY = Math.min(...stepsData.map(step => step.y));
// 如果y是字符串，就转成数字：
// const minY = Math.min(...stepsData.map(step => Number(step.y)));

2. 筛选最低层级元素 #

再用filter把所有Y等于minY的元素挑出来，这些就是你要的最低层级元素：

const lowestLevelSteps = stepsData.filter(step => step.y === minY);
// 对应字符串Y的情况：
// const lowestLevelSteps = stepsData.filter(step => Number(step.y) === minY);

完整React组件示例 #

把这个逻辑放到React组件里用的话，大概是这样：

function LevelFilterComponent() {
  // 模拟你的stepsData数据
  const stepsData = [
    { id: 'a', y: 10 },
    { id: 'b', y: 10 },
    { id: 'c', y: 10 },
    { id: 'd', y: 20 },
    { id: 'e', y: 20 },
    { id: 'f', y: 30 },
    { id: 'g', y: 30 },
    { id: 'h', y: 30 },
  ];

  // 计算最低层级元素
  const minY = Math.min(...stepsData.map(step => step.y));
  const lowestLevelSteps = stepsData.filter(step => step.y === minY);

  return (
    <div className="steps-container">
      <h2>最低层级元素列表</h2>
      <ul>
        {lowestLevelSteps.map(step => (
          <li key={step.id}>{step.id}</li>
        ))}
      </ul>
    </div>
  );
}

为什么之前的filter写法不对？ #

如果之前你在filter回调里只和当前元素的前后项比较，那如果数组不是按Y坐标排序的，就会漏掉同一层级的元素，或者误选其他层级的。先拿到全局最小Y值，再筛选就不会有这个问题啦。

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