React使用对象映射渲染组件时报未初始化、undefined错误如何解决？

你遇到的是ES模块的初始化时序问题，核心触发原因大概率是模块间循环依赖：

• 你把components对象定义在模块顶级作用域时，这个对象会在当前模块被导入时立刻完成初始化赋值，此时由于你当前Card所在模块和Benchmark等业务组件存在循环导入，业务组件还没完成初始化，所以对象里拿到的都是undefined。
• 最初的&&条件渲染写法、以及把components放在组件内部的写法都能正常运行，是因为这两种场景下都是组件渲染阶段才读取组件引用，此时所有模块都已经完成初始化，自然能拿到正确的组件值。
• 你在其他模块用相同的外部映射模式没有问题，是因为那些模块不存在和对应业务组件的循环依赖，模块初始化时业务组件已经完成了赋值。

如果要保持components定义在组件外部，可以用以下三种方案实现：

方案1：惰性取值（最便捷，无侵入） #

把映射对象的值改成返回组件的函数，初始化时只存函数引用不读取组件，实际渲染时调用函数再取值：

// 模块顶级定义映射
const components = {
  Benchmark: () => Benchmark,
  DiskSpace: () => DiskSpace,
  MainFeature: () => MainFeature,
  Scanning: () => Scanning,
  Uninstaller: () => Uninstaller,
}

export const Card: React.FC<CardProps> = ({ component, title, backgroundImg, ...props }) => {
  // 渲染时调用函数获取组件
  const Component = components[component]()

  return (
    <CardContainer {...props}>
      {Component && <Component />}
    </CardContainer>
  )
}

方案2：动态导入（适合代码分割场景） #

如果需要做代码分割，可以配合React.lazy实现，天然规避初始化时序问题：

const components = {
  Benchmark: React.lazy(() => import('./Benchmark')),
  DiskSpace: React.lazy(() => import('./DiskSpace')),
  MainFeature: React.lazy(() => import('./MainFeature')),
  Scanning: React.lazy(() => import('./Scanning')),
  Uninstaller: React.lazy(() => import('./Uninstaller')),
}

// 使用时外层需要包裹Suspense组件：
export const Card: React.FC<CardProps> = ({ component, title, backgroundImg, ...props }) => {
  const Component = components[component]

  return (
    <CardContainer {...props}>
      <React.Suspense fallback={<div>加载中...</div>}>
        {Component && <Component />}
      </React.Suspense>
    </CardContainer>
  )
}

方案3：消除循环依赖（根因解决） #

排查当前Card组件所在模块和业务组件之间的循环导入关系：比如是不是Card导入了Benchmark，Benchmark又导入了Card/或者Card所在模块的其他变量。调整代码结构把公共依赖抽离到独立模块，从根源上避免循环依赖，顶级映射对象就能正常赋值。

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