Question

我有一个普通的旧颜色类，我已经在我的应用程序中的许多地方使用了它：

const Color = {
    [...]
    cardBackground: '#f8f8f8',
    sidebarBackground: '#eeeeee',
    viewportBackground: '#D8D8D8',
    [...]
}

export default Color;

很简单。现在，我想实现暗模式支持，而无需更改代码的外部修改。我决定连接到状态，直接读取它并在getter中返回适当的值：

const Color = {
    [...]
    cardBackground: '#f8f8f8',
    get sidebarBackground(){ return lightDark('#eeeeee','#222222') },
    viewportBackground: '#D8D8D8',
    [...]
}

export default Color;

lightDark定义为：

export function lightDark<T1, T2>(light:T1, dark:T2){
    return themeSelector(store.getState()) == 'dark' ? dark : light;
}

现在我突然在访问undefined的第一个地方突然遇到Color错误（不一定是Color.sidebarBackground，而是Color中的任何东西）

如果我修改代码以删除对该状态的访问（仅用于测试），它将开始工作：

export function lightDark<T1, T2>(light:T1, dark:T2){
  return themeSelector({session:{theme:'dark'}} as any)  == 'dark' ? dark : light;
}

到底是怎么回事？

为澄清起见，这是确切的错误：

TypeError: Cannot read property 'title' of undefined

我尝试访问Color.title的地方，这似乎是我应用中对Color的第一个引用（因此，title无关紧要）。

我还意识到，在定义了store的文件中以任何方式引用Color 的那一刻，Color都变得未定义。甚至console.log(store);也会导致Color变得不确定。

Answer 1

发现了问题：import中的store有时是间接访问Color，从而造成了难以检测的循环依赖。通过一点重构摆脱了参考，问题得以解决。

如果访问状态，React TypeScript对象将变为未定义

1 个答案: