使用Mobx RootStoreProvider包裹React应用触发Objects are not valid as a React child报错

问题排查与修复方案 #

核心报错原因 #

你当前的报错最可能由以下几个问题共同导致：

1. RootStoreProvider导入错误
   provider.tsx中的RootStoreProvider是命名导出，如果你在index.tsx中使用默认导入语法（比如import RootStoreProvider from './provider'），此时拿到的RootStoreProvider是整个模块对象而非函数组件，将模块对象当作组件渲染就会触发「对象不能作为React子元素」的报错。
   修复方法：index.tsx改为使用命名导入：

import { RootStoreProvider } from './provider'

2. RootStore类型导入错误
   RootStore.ts是默认导出，但你在DeckStore.tsx中使用了命名导入语法import { RootStore } from './RootStore'，拿到的RootStore是undefined，会导致后续运行时类型错误。
   修复方法：改为默认导入：

import RootStore from './RootStore'

3. store单例逻辑失效
   provider.tsx中声明了全局store变量，但创建新实例后没有赋值回全局变量，每次Provider重新渲染都会创建新的RootStore实例，不符合你的单例设计预期。
   修复方法：修改RootStoreProvider中的实例创建逻辑：

const root = store ??= new RootStore();

4. 文件后缀使用错误
   RootStore、DeckStore都是普通TS类/工厂函数，不需要使用.tsx后缀，建议重命名为RootStore.ts、DeckStore.ts，避免TS误判为组件文件引发异常。

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