Mobx React Native报Cannot read property 'products' of undefined错误求助

错误本质 #

这个错误的核心是useStores()返回了undefined，导致你尝试解构products时触发读取undefined属性的报错。

核心原因：缺少MobX Provider的上下文注入 #

你的代码没有在React组件树的根节点使用MobX的Provider包裹，导致MobXProviderContext未被注入任何值，useContext(MobXProviderContext)自然返回undefined，访问.rootStore就会出错。

修复步骤 #

1. 在根组件中配置Provider

找到你的App根组件（比如App.tsx），导入Provider和store，用Provider包裹整个应用：

import { Provider } from 'mobx-react';
import store from './stores';
import Home from './screens/Home';

function App() {
  return (
    // 把rootStore注入到Context中
    <Provider rootStore={store}>
      <Home />
      {/* 其他路由/组件 */}
    </Provider>
  );
}

export default App;

2. 验证useStores的正确性

你的useStores实现是正确的，但要确保Provider传入的key是rootStore，这样React.useContext(MobXProviderContext).rootStore才能拿到正确的RootStore实例：

// hooks/useStores.tsx 无需修改，保持原样
import React from 'react';
import { MobXProviderContext } from 'mobx-react';
import store from '@stores';

export const useStores = (): typeof store => {
    return React.useContext(MobXProviderContext).rootStore;
};

3. 修复useEffect的无限循环问题

你的Home.tsx中useEffect没有设置依赖项，会导致组件每次渲染都调用onInit()，触发无限循环，补充空依赖数组：

// screens/Home.tsx 修复后
import { useEffect } from 'react';
import { useStores } from '../hooks/useStores';

const Home = () => {
    const { products } = useStores();

    const onInit = () => {
        products.getProducts('Playstation5');
    };

    useEffect(() => {
        onInit();
    }, []); // 空数组确保只在组件挂载时执行一次

    return (
        // 你的组件JSX
    );
};

export default Home;

额外检查点 #

• 确保所有使用useStores()的组件都在Provider的子树中（比如路由组件不能在Provider外面）
• 验证stores/index.ts中的store实例是否正确创建（可以在stores/index.ts末尾加console.log(store)确认products属性存在）

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