MobX状态树存储未出现在道具中

我正在使用MobX React lite将MobX状态树实现到我的React本机应用程序中。我可以使用我从教程中找到的一个钩子直接访问商店：

const useInject = <T,>(mapStore: MapStore<T>) => {
  const store = useStore();
  return mapStore(store);
};

//App.tsx
从“React”导入React；
导入“mobx react lite/batchingForReactNative”；
从“./src/Components/Context”导入{StoreProvider}；
从“./src/State/store”导入存储；
导出默认函数App（）{
返回(
);
}

//Component.tsx
从“React”导入React，{useState，useffect}；
从'mobx react lite'导入{observer}；
从“mobx”导入{values}；
从“../State/Store”导入{RootStoreModel}；
从“../Components/Context”导入{useStore}；
从“../Hooks/useInject”导入useInject；
常量映射存储=（{user}:RootStoreModel）=>({
用户，
});
导出常量MyComponent:React.FunctionComponent=（props:any）=>{
const{user}=useInject（mapStore）；
console.log（'USER'，USER）；//从状态树返回用户
console.log（'PROPS'，PROPS）；//不包含状态树中的数据
const UserArray=值（用户）；
console.log（'Array'，UserArray）；//返回存储在状态树中的用户数组
返回(
);
};
导出默认观察员（会议列表）；

您所说的每个组件中的

是什么意思？就像在每个组件中自动使用App.tsx而不使用
inject
？@Danila我的理解是，通过在StoreProvider中包装App.tsx，可以通过道具访问状态。这就是它在文档中的MST示例中的工作方式，它本身无法显示。您或者需要使用来自
mobx react
和
inject
decorator的提供者，或者像以前一样使用钩子。Hooks是一种现代的方式，所以我不太明白你为什么要更改它。我可以获取数据，但我无法访问任何函数来更改状态。我还没有把它们包括在这里，但有几个动作我无法访问。我将更新
User.ts
文件以反映它们。您认为每个组件中的
是什么意思？就像在每个组件中自动使用App.tsx而不使用
inject
？@Danila我的理解是，通过在StoreProvider中包装App.tsx，可以通过道具访问状态。这就是它在文档中的MST示例中的工作方式，它本身无法显示。您或者需要使用来自
mobx react
和
inject
decorator的提供者，或者像以前一样使用钩子。Hooks是一种现代的方式，所以我不太明白你为什么要更改它。我可以获取数据，但我无法访问任何函数来更改状态。我还没有把它们包括在这里，但有几个动作我无法访问。我将更新
User.ts
文件以反映它们。
// Store.ts
import { types, Instance } from 'mobx-state-tree';

import { User } from './Models/User';

const RootStore = types.model({
  user: types.map(User),
});

export const store: RootStoreModel = RootStore.create({
  user: {
    1: {
      balance: '5046',
      email: 'email@email.com',
      firstName: 'Test',
      id: '5f02bbb4b30b4a67997fdfea',
      surname: 'Guy',
    },
  }
});

export type RootStoreModel = Instance<typeof RootStore>;
export default store;

// User.ts
import { types } from 'mobx-state-tree';

export const User = types.model({
  id: types.identifier,
  firstName: types.optional(types.string, ''),
  email: types.string,
  balance: types.optional(types.string, ''),
  surname: types.optional(types.string, ''),
})
  .actions((self: UserType) => ({
    setBalance(newBalance: string) {
      console.log('NEW BALANCE', newBalance);
      self.balance = newBalance;
    },
  }))
  .views((self) => ({
    get getBalance() {
      return self.balance;
    },
  }));

export default User;

// App.tsx
import React from 'react';
import 'mobx-react-lite/batchingForReactNative';
import { StoreProvider } from './src/Components/Context';

import store from './src/State/Store';

export default function App() {
  return (
    <StoreProvider value={store}>
      <MainNavigator initialRouteName={AppRoute.AUTH_LOADING} />
    </StoreProvider>
  );
}

// Component.tsx
import React, { useState, useEffect } from 'react';
import { observer } from 'mobx-react-lite';
import { values } from 'mobx';

import { RootStoreModel } from '../State/Store';


import { useStore } from '../Components/Context';
import useInject from '../Hooks/UseInject';

const mapStore = ({ user }: RootStoreModel) => ({
  user,
});

export const MyComponent: React.FunctionComponent = (props: any) => {

  const { user } = useInject(mapStore);
  console.log('USER', user); // Returns the User from the state tree
  console.log('PROPS', props); // Doesnt contain the data from the state tree

  const UserArray = values(user);
  console.log('Array', UserArray); // Returns the array of users stored in the state tree


  return (
    <ScrollView>
      <Component />
    </ScrollView>
  );
};

export default observer(MeetingList);