mobx

#javascript #react-native #mobile #mobx

Вопрос:

Требуется помощь, пожалуйста

Попытка использовать mobx в приложении react-native с версиями

         "react": "17.0.2",
        "react-native": "0.65.1",
        "mobx": "6.3.2",
        "mobx-react": "7.2.0",
 

App.js

   import { Provider } from "mobx-react";
  import { AuthStore } from './mobx/AuthStore'
  const authStore = new AuthStore()
  return (
    <NavigationContainer>  
    <NavigationContainer>   
      <StripeProvider publishableKey={'...'}>
        <Provider authStore={AuthStore}>
          <SafeAreaView style={backgroundStyle}>
            <MonitorApp/>
          </SafeAreaView>
        </Provider>
      </StripeProvider>
    </NavigationContainer>
 

AuthStore.js

 import { observable, action, runInAction } from 'mobx';
class AuthStore {
    @observable urlModal = false;

    @observable provider;
  
    constructor() {
        makeObservable(this)
    }

}
const authStore = new AuthStore()
export default authStore
 

и далее в приложении в MonitorApp у нас есть компонент реакции под названием

 import {inject, observer } from 'mobx-react';
@inject('authStore') @observer
class MonitorAppOverlay extends React.Component {
    renderModal() {
        const { authStore } = this.props;
        const { modalUrl } = authStore;
        console.log(this.props)
        console.log(AuthStore)
    }
}

export default MonitorAppOverlay
 

modalUrl не определен и выбрасывает. В предыдущей версии этого приложения, использующего тот же стиль использования mobx, с помощью @inject, магазины были заполнены без проблем

у кого-нибудь есть какие-нибудь идеи??

ОБНОВЛЕНО с правильными конструкторами в магазине, и все они работают сейчас

Ответ №1:

Прямо сейчас вы просто передаете конструктор хранилища Provider , но вам нужно создать экземпляр вашего AuthStore первого и передать этот экземпляр поставщику.