Question

我正在尝试在 React 中使用静态类。但是，在本地运行 Webpack 服务器时，我不断收到以下错误：Uncaught TypeError: _util_stageHelper__WEBPACK_IMPORTED_MODULE_3__.getStageName is not a function。我已经将其追溯到我的代码中的循环依赖。

这是我的代码结构：

// util/stageHelper.js
import {StageConfiguration} from '../config/StageConfiguration'
export class StageEligibility {
    static stageEnabled = StageConfiguration.getEnabled();

    static isEligible(key) {
        if(stageEnabled) {
            return;
        }
        return key.indexOf('com') > -1;
    }

    static notifyEligibility() {
        if (!this.stageEnabled) {
            return;
        }
        alert('Only the com stages are eligible for viewing');
    }

    // other other static properties and functions
}

export const getStageName = (key) => {
    if (StageEligibility.isEligible(key)) {
        return STAGES[key];
    }
};


// config/StageConfiguration.js
import {getStageName} from '../util/stageHelper'

export class StageConfiguration {
    static config = {
        stageName: getStageName('com-openserve') // the code breaks here with the above error
        enabled: true,
    }
    static getEnabled() {
        return this.config.enabled;
    }
    // static properties and functions that make use of this.config
}

我在应用程序的根 React 组件中导入 StageEligibility 并调用 StageEligibility.notifyEligibility()。

有人可以提供一些关于如何解决这种循环依赖的想法吗？

Answer 1

从根本上说，当你在模块 A 和 B 之间有一个循环时，这意味着如果没有仔细规划加载顺序（这可能很棘手），你不能在 B 的顶级代码中使用从 A 导入的资源，或资源从 A 的顶级代码中的 B 导入。但是您的 static 属性初始值设定项正在尝试这样做。

这个特定案例中的问题看起来比模块更基本。您有 StageConfiguration 在创建类时尝试使用 getStageName，而 getStageName 尝试使用 StageEligibility 类，该类尝试使用 StageConfiguration。您不能让 StageConfiguration 类的创建依赖于 StageEligibility 已经存在并完全初始化并且让 StageEligibility 的创建依赖于 {{1}已经存在并且正在完全初始化。这是一个先有鸡还是先有蛋的逻辑问题。

将两个类都需要的部分提取到每个类可以独立使用的第三个类/函数/数据成员中，这样就可以创建和初始化该类/函数/数据成员，然后作为创建每个类的一部分使用课程。

如何解决 ES6 中的这种循环依赖？

1 个答案: