我正在尝试在 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()
。
有人可以提供一些关于如何解决这种循环依赖的想法吗?
答案 0 :(得分:1)
从根本上说,当你在模块 A 和 B 之间有一个循环时,这意味着如果没有仔细规划加载顺序(这可能很棘手),你不能在 B 的顶级代码中使用从 A 导入的资源,或资源从 A 的顶级代码中的 B 导入。但是您的 static
属性初始值设定项正在尝试这样做。
这个特定案例中的问题看起来比模块更基本。您有 StageConfiguration
在创建类时尝试使用 getStageName
,而 getStageName
尝试使用 StageEligibility
类,该类尝试使用 StageConfiguration
。您不能让 StageConfiguration
类的创建依赖于 StageEligibility
已经存在并完全初始化并且让 StageEligibility
的创建依赖于 {{1}已经存在并且正在完全初始化。这是一个先有鸡还是先有蛋的逻辑问题。
将两个类都需要的部分提取到每个类可以独立使用的第三个类/函数/数据成员中,这样就可以创建和初始化该类/函数/数据成员,然后作为创建每个类的一部分使用课程。