React组件按名称值过滤代码优化：简化props.children重复调用

核心优化思路 #

1. 提取重复访问的深层属性：把冗长的event.props.children.props.printEvent解构出来，避免重复书写属性链
2. 配置化匹配规则：将不同name和value的匹配条件做成数组配置，后续维护更方便
3. 增加空值保护：避免因printEvent不存在导致的运行时报错
4. 简化逻辑判断：用数组some方法替代多段||判断，让逻辑更清晰

优化后的完整代码 #

// 定义过滤规则：数组每项对应需要匹配的name和value条件
const filterRules = [
  { name: 'control_fault', value: true },
  { name: 'running', value: false },
  { name: 'safety_chain', value: false },
  { name: 'torch_collision', value: true },
  { name: 'motion_sup', value: true },
  { name: 'e_stop', value: true },
];

const filteredItems = eventList.filter((event) => {
  // 用可选链做空值保护，解构出printEvent
  const printEvent = event.props.children?.props?.printEvent;
  if (!printEvent) return false;

  // 基础公共条件
  const meetsBaseRequirements = printEvent.labels === null && printEvent.notes === null;
  // 检查是否匹配任意一条规则
  const matchesRule = filterRules.some(rule => {
    // control_fault仅需匹配name，value已符合基础条件的true要求
    if (rule.name === 'control_fault') {
      return printEvent.name === rule.name;
    }
    return printEvent.name === rule.name && printEvent.value === rule.value;
  });

  return meetsBaseRequirements && matchesRule;
});

// 简化filteredArray的处理（原写法冗余，直接根据结果赋值即可）
const filteredArray = filteredItems.length > 0 ? [...filteredItems] : [];
ui.setUnlabeledCount(filteredItems.length);

console.log(eventList, filteredArray, filteredItems, ui.unlabeledCount);

优化细节说明 #

• 空值保护：使用?.可选链操作符，避免组件层级属性缺失时抛出错误
• 规则配置化：后续新增或修改过滤规则，只需在filterRules数组中调整，无需改动核心过滤逻辑
• 逻辑拆分：将基础条件和规则匹配拆分后，代码可读性大幅提升，调试也更方便
• 冗余代码移除：原代码中filteredArray.push([...filteredItems])的写法无意义，直接根据结果赋值更合理

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