如何在externalFilter函数中按条件动态设置selectedConformityStatus

你需要将动态条件逻辑从单例的初始化流程中剥离，改为通过动态计算属性来返回目标数组，这样既保留单例的唯一性，又能响应外部状态的变化。

核心思路 #

单例的核心是保证实例唯一，但不需要把所有逻辑都塞在初始化阶段。将selectedConformityStatus设计为动态计算的属性，每次访问时根据当前__checklist.project.analysisData?.actionPlan的值生成对应数组，避免初始化时依赖未就绪的外部状态，也能自动响应后续状态变化。

代码实现示例 #

类式单例（ES6） #

class ExternalFilter {
  constructor() {
    // 仅初始化固定的基础状态数组，不依赖外部动态值
    this.baseStatus = ["approved", "rejected"]; // 替换为你的基础状态值
  }

  // 动态计算目标数组的getter属性
  get selectedConformityStatus() {
    // 安全访问外部状态，避免未定义报错
    const hasActionPlan = __checklist?.project?.analysisData?.actionPlan === 'yes';
    
    // 根据条件返回新数组，避免外部修改污染基础数据
    return hasActionPlan 
      ? [...this.baseStatus, "initial_status"] 
      : [...this.baseStatus];
  }

  // 单例实例获取方法
  static getInstance() {
    if (!ExternalFilter.instance) {
      ExternalFilter.instance = new ExternalFilter();
    }
    return ExternalFilter.instance;
  }
}

// 使用方式
const externalFilter = ExternalFilter.getInstance();
// 每次访问都会根据当前actionPlan返回最新数组
console.log(externalFilter.selectedConformityStatus);

函数式单例（IIFE） #

如果偏好函数式实现，可以用立即执行函数创建单例：

const externalFilter = (() => {
  const baseStatus = ["approved", "rejected"]; // 你的基础状态值

  return {
    get selectedConformityStatus() {
      const hasActionPlan = __checklist?.project?.analysisData?.actionPlan === 'yes';
      return hasActionPlan ? [...baseStatus, "initial_status"] : [...baseStatus];
    }
  };
})();

// 使用
console.log(externalFilter.selectedConformityStatus);

为什么之前的实现会崩溃？ #

大概率是你将动态条件逻辑写在了单例的初始化构造函数中：

• 初始化时__checklist可能还未加载完成，导致访问不存在的属性抛出错误
• 即使初始化时状态正确，后续actionPlan变化时，单例中的数组不会自动更新，引发逻辑错误

注意事项 #

• 使用可选链?.安全访问嵌套属性，避免因__checklist或其子属性未定义导致的运行时错误
• 每次返回新数组（通过[...arr]），防止外部代码修改数组后影响单例内部的基础数据

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